AngularJS学习笔记——通过Ajax获取JSON数据T资源-CSDN下载

共13个文件

js：4个

css：2个

woff：1个

动态清单列表

AngularJS

Ajax

JSON

需积分: 10 181 浏览量 2017-07-16 14:06:42 上传评论收藏 440KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

ToDoList_JSON.zip （13个子文件）

bootstrap

css

bootstrap-theme.css 15KB

bootstrap.css 118KB

fonts

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.svg 106KB

npm.js 484B

bootstrap.min.js 36KB

bootstrap.js 68KB

todo.html 2KB

todo.json 80B

angularJs

angular.js 1.29MB

<!DOCTYPE html> <html ng-app="todoApp"> <head> <meta charset="UTF-8"> <title>TO DO List</title> <link href="./bootstrap/css/bootstrap.css" rel="stylesheet"/> <link href="./bootstrap/css/bootstrap-theme.css" rel="stylesheet"/> <script src="./angularJs/angular.js"></script> <script> var model = { user: "Yimi" }; var todoApp = angular.module("todoApp", []); todoApp.run(function ($http) { $http.get("./todo.json").success(function (data) { model.items = data; console.log("data:" ,data ); console.log("items:" , model.items) }); }); todoApp.controller("ToDoCtrl", function ($scope) { $scope.todo = model; $scope.incompleteCount = function () { var count = 0; angular.forEach($scope.todo.items, function (item) { if (!item.done) { count++; } }); return count; } $scope.warningLevel = function () { return $scope.incompleteCount() < 2 ? "label-success" : "label-warning"; } $scope.addNewItem = function (actionText) { $scope.todo.items.push({action: actionText, done: false}); } }); </script> </head> <body ng-controller="ToDoCtrl"> <div class="page-header"> <h1>{{todo.user}}'s TO DO List  <span class="label label-default" ng-hide="incompleteCount() == 0" ng-class="warningLevel()">{{incompleteCount()}}</span> </h1> </div> <div class="panel"> <div class="input-group"> <input class="form-control" ng-model="actionText"/> <span class="input-group-btn"> <button class="btn btn-default" ng-click="addNewItem(actionText)">Add</button> </span> </div> <table class="table table-striped"> <thead> <tr> <th>Description</th> <th>Done</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat="item in todo.items"> <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done"/></td> <td>{{item.done}}</td> </tr> </tbody> </table> </div> </body> </html>

评论收藏

内容反馈