angular 双向绑定demo
Posted s-xl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular 双向绑定demo相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en" ng-app="myApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>angular 点餐</title> 6 <script src="js/angular.js"></script> 7 </head> 8 <body ng-controller="myCtrl"> 9 <div style="width:400px"> 10 <h1 ng-bind="appName"></h1> 11 <h4 ng-bind="restaurant"></h4> 12 <hr> 13 <table> 14 <th ng-repeat="head in th" ng-bind="head" ></th> 15 <tr ng-repeat="food in meal" > 16 <td><input type="checkbox" ng-model="food.isCheck" ng-click="select()" ng-checked="food.isCheck"></td> 17 <td ng-bind="food.name"></td> 18 <td ng-bind="food.price|moneyFormat"></td> 19 <td ng-bind="food.quantity"></td> 20 21 <td ng-click="count(food,-1);select()">-</td> 22 <td ng-init="key=$index" ng-click="del($index);select()">删除</td> 23 <td ng-click="count(food,1);select()">+</td> 24 25 <td ng-bind="food.price*food.quantity|moneyFormat"></td> 26 27 </tr> 28 </table> 29 <hr> 30 <h4><input type="checkbox" ng-model="checkAll" ng-click="toggleSelect();select()" ng-checked="checkAll">全选</h4> 31 <h4>合计: <span ng-bind="totalprice|moneyFormat" ></span></h4> 32 33 34 </div> 35 36 <script> 37 var app =angular.module(‘myApp‘,[‘ng‘]); 38 app.controller(‘myCtrl‘,function($scope){ 39 $scope.appName=‘我饿了‘; 40 $scope.restaurant=‘xl美食‘; 41 $scope.th=[‘选择‘,‘商品‘,‘价格‘,‘数量‘,‘-‘,‘删除‘,‘+‘,‘小计‘]; 42 // $scope.isCheck=false; 43 $scope.meal=[{name:‘红烧肉盖饭‘,price:19,quantity:1,isCheck:false}, 44 {name:‘梅菜扣肉盖饭‘,price:19,quantity:1,isCheck:false}, 45 {name:‘肥牛饭‘,price:18,quantity:1,isCheck:false}, 46 {name:‘咖喱鸡‘,price:17,quantity:1,isCheck:false}, 47 {name:‘卤蛋‘,price:2,quantity:1,isCheck:false}, 48 {name:‘卤肉饭‘,price:18,quantity:1,isCheck:false} 49 ]; 50 $scope.select=function(){ 51 $scope.checkAll=true; 52 53 //遍历选择的商品 54 angular.forEach($scope.meal,function(val,key){ 55 // console.log(‘已选择‘+val.name); 56 $scope.checkAll=$scope.checkAll&&val.isCheck; 57 }) 58 //合计价格 59 $scope.totalprice=0; 60 angular.forEach($scope.meal,function(val,key){ 61 // console.log(‘已选择‘+val.name); 62 if(val.isCheck){ 63 $scope.totalprice+=val.price*val.quantity; 64 } 65 }) 66 } 67 68 $scope.toggleSelect=function(){//点击全选/取消全选的时候,遍历商品列表更换选中的值 69 angular.forEach($scope.meal,function(val,key){ 70 val.isCheck=$scope.checkAll; 71 }) 72 } 73 74 $scope.del=function(index){ 75 console.log(index); 76 $scope.meal.splice(index,1); 77 } 78 79 $scope.count=function(object,num){ 80 object.quantity+=num; 81 if(object.quantity<1){ 82 object.quantity=1; 83 } 84 85 } 86 87 88 }); 89 //金额的过滤器 90 app.filter(‘moneyFormat‘,function(){ 91 return function(val){ 92 if(val){//判断是否有值 93 return ‘￥‘+val.toFixed(2)+‘元‘ 94 95 }else{ 96 val=0; 97 return ‘￥‘+val.toFixed(2)+‘元‘ 98 99 } 100 101 } 102 103 }) 104 105 </script> 106 </body> 107 </html>
如有复制,请注意js文件路径.
以上是关于angular 双向绑定demo的主要内容，如果未能解决你的问题，请参考以下文章