<!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
<!--添加ng-hide="incompleteCount() == 0"使未办事项数为0时不显示此标签-->
<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>
AngularJS学习笔记——通过Ajax获取JSON数据T
需积分: 10 81 浏览量
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 js npm.js 484B bootstrap.min.js 36KB bootstrap.js 68KB
todo.html 2KB todo.json 80B angularJs angular.js 1.29MB资源评论
