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

来源：互联网发布：找客户的app软件编辑：程序博客网时间：2024/05/22 13:17

上截图了，看效果，都是用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 }            ]

0 0