<!DOCTYPE html>
<html lang="en" ng-app="todoApp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script type="text/javascript" src="angular-1.6.6/angular.js"></script>
<script type="text/javascript">
// 创建模块
var todoApp = angular.module("todoApp",[]);
</script>
<title>To do list</title>
</head>
<body>
<div class="page-header">
<h1>To do list</h1>
</div>
<div class="panel">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">Add</button>
</span>
</div>
<table class="table table-scriped">
<thead>
<th>Description</th>
<th>Done</th>
</thead>
<tbody>
<tr>
<td>Buy Flowers</td>
<td>yes</td>
</tr>
<tr>
<td>Buy Flowers</td>
<td>yes</td>
</tr>
<tr>
<td>Buy Flowers</td>
<td>yes</td>
</tr>
<tr>
<td>Buy Flowers</td>
<td>yes</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
AngularJS应用有多个模块构成，angular.module()；
data-ng-app符合html标准。
AngularJS应用的流程
创建数据模型 -- 绑定控制器 -- 创建视图
注意： 控制器的命名习惯 <Name>Ctrl, 一种命名习惯！
以下是ng-repeat的实现生成效果：
<tbody>
<!-- 使用指令 -->
<!-- ngRepeat: item in todo.items --><tr data-ng-repeat="item in todo.items" class="ng-scope">
<td class="ng-binding">Buy Flower</td>
<td class="ng-binding">false</td>
</tr><!-- end ngRepeat: item in todo.items --><tr data-ng-repeat="item in todo.items" class="ng-scope">
<td class="ng-binding">Buy Flower</td>
<td class="ng-binding">true</td>
</tr><!-- end ngRepeat: item in todo.items --><tr data-ng-repeat="item in todo.items" class="ng-scope">
<td class="ng-binding">Buy Flower</td>
<td class="ng-binding">false</td>
</tr><!-- end ngRepeat: item in todo.items -->
</tbody>
接下来尝试高级功能：
1.使用双向模型绑定
双向数据绑定一般是与html表单元素相关联！
2.控制器行为的创建
3.实现用户交互效果
注意：当AngularJS遇到html里面的时间处理代码时，会偷偷的设置一个遵循javascript的处理器！
4.对数据模型进行过滤和排序
5.通过ajax获取数据
注意：遇到$http.get(...).success() is not a function() 的报错，参考：
http://blog.csdn.net/u011127019/article/details/54846710
以下为全部代码：
<!DOCTYPE html>
<html lang="en" ng-app="todoApp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script type="text/javascript" src="angular-1.6.6/angular.js"></script>
<script type="text/javascript">
var todoApp = angular.module("todoApp",[]);
//创建数据模型
var model = {
user: "Adam",
// items: [
// { action: "Buy Flower", done: false},
// { action: "Buy Flower", done: true},
// { action: "Buy Flower", done: false}
// ]
};
// 创建控制器
todoApp.controller('ToDoCtrl', ['$scope', 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() < 3? "label-success" : "label-warning";
};
// 用户交互效果
$scope.addNewItem = function( actionText ) {
$scope.todo.items.push({ action: actionText, done: false })
};
}]);
// 创建自定义过滤器
todoApp.filter("checkedItems", function() {
return function(items, showComplete) {
var resultArr = [];
angular.forEach(items, function(item) {
if(item.done == false || showComplete == true) {
resultArr.push(item);
}
});
return resultArr;
}
});
//获取ajax请求
todoApp.run(function($http) {
$http.get("todo.json").then(function(data) {
console.log(data);
model.items = data.data;
});
});
</script>
<title>To do list</title>
</head>
<body data-ng-controller="ToDoCtrl">
<div class="page-header">
<!-- 插入模型值 -->
<h1> {{ todo.user }}'s To do list
<!-- <span class="label label-default">
计算表达式
{{ todo.items.length }}
</span> -->
<!-- 控制器行为 -->
<span class="label label-default" ng-class="warningLevel()" ng-hide="incompleteCount() == 0">
{{ incompleteCount() }}
</span>
</h1>
</div>
<div class="panel">
<div class="input-group">
<input type="text" 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-scriped">
<thead>
<th>Description</th>
<th>Done</th>
</thead>
<tbody>
<!-- 使用指令 -->
<tr data-ng-repeat = "item in todo.items | checkedItems: showComplete | orderBy:'action'">
<td>{{ item.action }}</td>
<!-- 使用双向数据绑定 -->
<td><input type="checkbox" ng-model="item.done"></td>
<td>{{ item.done }}</td>
</tr>
</tbody>
</table>
<div class="checkbox-inline">
<label for=""><input type="checkbox" ng-model="showComplete"> showCompletelete</label>
</div>
</div>
</body>
</html>
image.png
以上一个简单的angular应用完成！
网友评论