码迷,mamicode.com
首页 > 其他好文 > 详细

angular 双向绑定demo

时间:2018-04-29 01:15:05      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:repeat   技术   title   body   info   分享图片   tle   sele   turn   

技术分享图片

 

  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

标签:repeat   技术   title   body   info   分享图片   tle   sele   turn   

原文地址:https://www.cnblogs.com/s-xl/p/8969933.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!