angular添加修改总计数量按钮加减

最新推荐文章于 2019-04-25 18:22:09 发布

zhaochuang4858529

最新推荐文章于 2019-04-25 18:22:09 发布

阅读量552

点赞数

本文链接：https://blog.csdn.net/zhaochuang4858529/article/details/79042210

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           table tr:nth-child(even){
               background-color: #FFE4C4;
           }
           table tr:nth-child(odd){
               background-color: #6495ED;
           }
       </style>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
       <script>

           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               //准备初始数据
               var date1 = new Date("2017-9-01 10:10:10");
               var date2 = new Date("2017-1-02 10:10:10");
               var date3 = new Date("2017-1-03 10:10:10");
               $scope.goods = [{
                   name:"云南白药",
                   num:100,
                   address:"云南",
                   price:19.911,
                   date:date1,
                   flag:true
               },{
                   name:"999感冒灵",
                   num:30,
                   address:"北京",
                   price:12.511,
                   date:date2,
                   flag:true
               },{
                   name:"感康",
                   num:20,
                   address:"河北",
                   price:16.611,
                   date:date3,
                   flag:true
               }];

               //搜索条件
               $scope.search="";
               $scope.orderByKey = "";

               //入库相关
               $scope.ifFlag = false;
               //点击入库是否显示下方的输入区域
               $scope.ifAdd = function(){
                   $scope.ifFlag = !$scope.ifFlag;

               }
               //添加商品
               $scope.newname="";
               $scope.newnum="";
               $scope.newaddress="";
               $scope.newprice="";
                $scope.pp="添加";
               $scope.updateIndex = 0;
               $scope.addgood = function(){
                   if($scope.pp=="添加"){
                       //创建good对象
                       var good = {
                           name:$scope.newname,
                           num:$scope.newnum,
                           address:$scope.newaddress,
                           price:$scope.newprice,
                           date:new Date()
                       };
                       if($scope.goods.length == 0){//此次添加，如果table没有出现，先显示
                           $scope.showTitle = true;
                       }
                       $scope.goods.push(good);
                       $scope.ifFlag = false;//添加完后，自动隐藏输入区域
                   }else{
                       $scope.goods[$scope.updateIndex ].name = $scope.newname;
                       $scope.goods[$scope.updateIndex ].num = $scope.newnum;
                       $scope.goods[$scope.updateIndex ].address = $scope.newaddress;
                       $scope.goods[$scope.updateIndex ].price = $scope.newprice;

                   }
               }

               $scope.showTitle = true;
               //删除商品
               $scope.deleteGood = function($index){
                   $scope.goods.splice($index,1);//在goods数组中删除此商品
                   //从新获得总价
                   $scope.getAllPrice();//调用计算总价的函数

                   if($scope.goods.length == 0){
                       $scope.showTitle = false;
                   }

               }
               //修改

$scope.updateGood = function($index){

$scope.pp="修改";

                   $scope.updateIndex = $index;
                   //显示修改区域
                   $scope.ifFlag = true;
                  if($scope.pp=="修改"){

                   $scope.newname=$scope.goods[$index].name;
                   $scope.newnum=$scope.goods[$index].num;
                   $scope.newaddress=$scope.goods[$index].address;
                   $scope.newprice=$scope.goods[$index].price;
                    }
               }

               //总计第一种方法
               $scope.allPrice = 0;
               $scope.getAllPrice = function(){
                   var count = 0;
                   for(index in $scope.goods){//遍历goods，得到索引
                       count += $scope.goods[index].price*$scope.goods[index].num;
                   }
                   $scope.allPrice = count;
               }
               $scope.getAllPrice();//调用计算总价的函数

               //减号
               $scope.jian1 = function($index){
                   $scope.goods[$index].num = $scope.goods[$index].num-1;
                   $scope.getAllPrice();//调用计算总价的函数

}

总计第二种方法：

    //总计

           $scope.allget=function(){
               var count=0;
               for(index in $scope.goods){
                   count+=$scope.goods[index].price*$scope.goods[index].num;
               }
               return count;
           }

});

</script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>1511k商品信息</h3>
           <input type="text" ng-model="search" placeholder="请输入搜索关键字"/>
           <select ng-model="orderByKey">
               <option value="">--请选择--</option>
               <option value="num">数量升序</option>
               <option value="-num">数量降序</option>
               <option value="price">价格升序</option>
               <option value="-price">价格降序</option>
           </select>
           <input type="button" value="入库" ng-click="ifAdd();"/><br /><br />
           <table ng-show="showTitle" >
               <tr style="background-color: #006400;"><th width="80">序号</th><th width="80">名字</th>
                   <th width="120" ng-click="orderByKey='num'">数量</th><th width="80">地址</th>
                   <th width="80" ng-click="orderByKey='price'">价格</th><th >日期</th><th width="80">小计</th><th >操作</th></tr>
               <tr align="center" ng-repeat="g in goods | orderBy:orderByKey | filter:{name:search}">
                   <td>{{$index}}</td>
                   <td>{{g.name}}</td>
                   <td><input type="button"value="-" ng-click="g.num=g.num-1;getAllPrice();"/>  
                       {{g.num}}  
                       <input type="button"value="+" ng-click="g.num=g.num+1;getAllPrice();"/>  
                   </td>
                   <td>{{g.address}}</td>
                   
                   <td ng-dblclick="g.flag=false"><span ng-show="g.flag">{{g.price}}</span>
                                                   <input ng-hide="g.flag" ng-model="g.price" ng-change="getAllPrice();" ng-blur="g.flag=true;" type="text" /></td>

                   <td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td>
                   <td>{{g.price*g.num | number:2}}</td>
                   <td>
                       <input type="button"value="删除" ng-click="deleteGood($index);"/>
                       <input type="button" value="修改" ng-click="updateGood($index);"/>
                   </td>
               </tr>

           </table><br />

总价：<span>{{allPrice | number:2}}</span>

<span>总计：{{allget()}}</span>