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

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

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

AngularJS带给你一个简单完善的Demo_第1张图片

AngularJS带给你一个简单完善的Demo_第2张图片

AngularJS带给你一个简单完善的Demo_第3张图片

AngularJS带给你一个简单完善的Demo_第4张图片

AngularJS带给你一个简单完善的Demo_第5张图片

贴代码喽


<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 }
            ]

你可能感兴趣的:(【网站前端】)