您的位置：首页 > Web前端 > AngularJS

AngularJS带给你一个简单完善的Demo

2016-01-20 13:58 676 查看

上截图了，看效果，都是用angulaJS+BootStrap实现的，代码极其简介，

用到的有：

1.1 完善的例子
1.2 双向数据绑定
1.3 过滤器工厂使用
1.4 repeat绑定
1.5 自动排序
1.7 交互式显隐元素
1.8 通过Ajax获取数据

贴代码喽

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="todoApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/angular/angular.js"></script>
<link href="js/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="js/bootstrap/bootstrap-theme.css" rel="stylesheet" />
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
<h2>
{{todo.user}}做的列表
<span class="label label-default" ng-hide="incompleteCount()==0"
ng-class="warningLevel()">{{incompleteCount()}}</span>
</h2>
</div>
<div class="panel">
<div class="input-group">
<input class="form-control" ng-model="actionText" />
<span class="input-group-btn">
<button class="btn btn-danger" ng-click="addNewItem(actionText)">添加</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr 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><input type="checkbox" ng-model="showComplete" />显示全部</label>
</div>
</div>
<script type="text/javascript">
var model = {
user: "刘壮",
items:[]
};

var todoApp = angular.module("todoApp", []);

//加载json数据
todoApp.run(function ($http) {
$http.get("todo.txt").success(function (data) {
model.items = data;
});
});
//控制器
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;
}

//得到不同的css style
$scope.warningLevel = function () {
return $scope.incompleteCount() > 3 ? "label-warning" : "label-success";
}

//添加新项
$scope.addNewItem = function (actionText) {
$scope.todo.items.push({ action: actionText, done: true });
}

})

//过滤器工厂
todoApp.filter("checkedItems", function () {
return function (items, showComplete) {
var resultArr = [];
angular.forEach(items, function (item) {
if (showComplete == true||item.done == false) {
resultArr.push(item);
}
});
return resultArr;
}
})
</script>
</body>
</html>

自定义todo.txt(原本是json文件)

[               { "action": "C 第一条", "done": false },
{ "action": "D 第二条", "done": false },
{ "action": "B 第三条", "done": true },
{ "action": "A 第四条", "done": false }
]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航