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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！