angular 代码学习

使用bootstrap插件时需要同时使用jq插件，以及添加bt  

 <script>
    var items = [{
                  id : '1',
                  name : '蜂蜜',
                  price : 30.00
              },{
                  id : '2',
                  name : '黄豆酱',
                  price : 15.8
              },
              {
                  id : '3',
                  name : '护手霜',
                  price : 15.00
              },
              {
                  id : '4',
                  name : '保温杯',
                  price : 29.9    
              },
              {
                  id : '5',
                  name : '鼠标',
                  price : 39.9
              },{
                  id : '6',
                  name : '米老头',
                  price : 8.8    
          }];
         var boughtList = {}; 
  </script>
  <style>
  .left ul li{list-style:none;
  float:left;width:100px;
  height:100px}
  .itembox{width:400px;
  height:300px}
  </style>
</head>

<body>
<div class="wrap" ng-app="myapp"  ng-controller="showItem" ><!-- ng-controller ng的语法 -->
<div class="left itembox border">
<ul> <li class="left" ng-repeat="value in items" item-id={{value.id}}>
                  <p>{{value.name}}</p>
                  <p> {{value.price}}</p>
<p><a href="javascript:void(0);" ng-click="buyAction($event);" 
　　　　　　　　　　　　　　name={{value.name}} price={{value.price}} item-id={{value.id}} >购买</a>
</li></ul>
</div>


 <div class="boughtlist border">
 <ul>
        <li ng-repeat="value in items" item-id={{value.id}}>
         <span>{{value.name}}</span>
                <span>{{value.price}}</span>
                <span style="width:100px;" item-id={{value.id}}>
 <a href="javascript:void(0);" ng-click="value.num=value.num+1;changeNum($event,value.num);" >+</a> 
                                   <input type="number" min="0" ng-model="value.num" ng-init="value.num=1" ng-change="changeNum(value.id,value.num)"/>
                 <a href="javascript:void(0);" ng-click="value.num=value.num-1;changeNum($event,value.num);">-</a>
                </span>
                <a href="javascript:void(0);" item-id={{value.id}} ng-click="delItem($event);" >删除</a>   
                </li>
        </ul>
        </div>
        
     <p ng-init=0 >总价格：{{ total | number:1}}</p>    
</div>

 

css样式

ng   js中要将加上放在最后

// JavaScript Document
var myapp=angular.module('myapp',[]);
 myapp.controller('showItem',function($scope){
             $scope.items = items;
             $scope.boughtList = boughtList;
             $scope.total = 0;
              for(var k in boughtList){
                 if(boughtList[k]){
                     $scope.total += boughtList[k].num*boughtList[k].price;
                 }
             }
             
              $scope.buyAction = function($event){
                 var el = $event.target;
                 var id = el.getAttribute('item-id');                 
                 if(boughtList[id]){
                     boughtList[id].num += 1;                     
                 }else{
                     var arr = [];
                     arr.name = el.getAttribute('name');
                     arr.price = el.getAttribute('price');
                     arr.num = 1;   
                     arr.id = id;              
                     boughtList[id] = arr;
                 }
                 $scope.total = common.getTotal($scope.total);        
             }
             
              $scope.delItem = function($event){
                 var li = $event.target.parentNode;
                 li.parentNode.removeChild(li);
                 var id = $event.target.getAttribute('item-id');
                 if(boughtList[id]){
                     delete boughtList[id];
                 }                 
                 $scope.total = common.getTotal($scope.total);
             }
             $scope.changeNum = function($event,num){   
                 var id; 
                 if(typeof $event == 'string'){
                     id = $event;
                 }else{
                     id = $event.target.parentNode.getAttribute('item-id');  
                 }                            
                                              
                 boughtList[id].num = num;
                 $scope.total = common.getTotal($scope.total);               
             }           
 } )
             
 var common = {
             getTotal : function(total){ //每次重新清零 算出总价，这样的话为什么还要传total参数？当时怎么想的？
                 total = 0;
                 for(var k in boughtList){                     
                     if(boughtList[k]){
                         if(boughtList[k].num <=0){
                             boughtList[k].num = 0;
                         }
                         total += boughtList[k].num*boughtList[k].price;
                     }
                 } 
                 return total;
             }
         }

 给table添加overflow，滚动条无效，要加display：block

      display:block;
       height:560px;
      overflow-y:auto;

然后样式会乱，给表头添加

   table thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

 

posted @ 2016-08-24 10:18  cindy—hmy  阅读(251)  评论(0)  编辑  收藏  举报