angularjs实现购物清单

HTML:

1：要定义ng-app,在html上定义ng-app="App";

2:在body上定义ng-controller="ToDoCtrl"

3:

    <div class="page-header">
        <div>
            <h1>
                {{todo.user}}的购物清单列表
            </h1>
            <div class="page-span">
                <span>清单总数：
                    <botton class="label label-warning">{{todo.items.length}}</botton>
                </span>
                <span>未采购数: 
                    <botton class="label label-succoss">{{count}}</botton>
                </span>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="panel">
        <div class="input-group">
            <input type="text" class="form-control" ng-model="actionText">
            <span>
                <button class="btn btn-default" ng-click="addNemIten(actionText)">添加</button>
            </span>
        </div>
        <div class="clear"></div>
        <table>
            <thead>
                <tr>
                    <th>清单名称</th>
                    <th>已采购</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in todo.items">
                    <td>{{item.action}}</td>
                    <td>
                        <input type="checkbox" ng-model="item.state" ng-change="notPurchaseCount()">
                    </td>
                    <td>{{item.state}}</td>
                </tr>
            </tbody>
        </table>
    </div>

JS:

1、要引用angular.js插件

2：

var model = {
    user:"huahua",
    items:[
        {action:"外套",state:false},
        {action:"短裙",state:false},
        {action:"连衣裙",state:true},
        {action:"化妆品",state:false},
    ]
}
// 声明模块
var todoApp = angular.module("App",[]);
// 定义变量
todoApp.controller('ToDoCtrl',function($scope){
    // h1的例子
    $scope.myname = "sonia";
    // 赋值
    $scope.todo = model;

    // 未采购数
    $scope.notPurchaseCount = function(){
        $scope.count = 0;
        angular.forEach($scope.todo.items,function(item){
            if(!item.state){
                $scope.count++
            }
        });
    };
    // 执行
    $scope.notPurchaseCount();
    // 添加
    $scope.addNemIten = function(actionText){
        if(!actionText) return;
        $scope.todo.items.push({action:actionText,state:false});
        $scope.actionText = "";
        $scope.notPurchaseCount();
    }
});

 

转载于:https://www.cnblogs.com/huahua0825/p/7838443.html