angular 添加删除隔行变色

最新推荐文章于 2023-05-22 10:54:19 发布

I_do_

最新推荐文章于 2023-05-22 10:54:19 发布

阅读量384

点赞数

文章标签：混合开发CSS

本文链接：https://blog.csdn.net/shitou0/article/details/79007236

版权

angularjs

1. 添加

2. 删除

3. currency过滤

<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/angular.min.js"></script>
       <script>
           var app = angular.module("app", []);
           app.controller("myCrel", function($scope) {

               //定义总量先为空
               $scope.zong = 0;
               $scope.shops = [{
                   name: "鼠标",
                   num: 4,
                   price: 101.00,
                   //price1: 101.00,
               }];
               //   计算总金额
               for(var i = 0; i < $scope.shops.length; i++) {
                   var xiaoji = $scope.shops[i].num * $scope.shops[i].price;
                   $scope.zong = xiaoji + $scope.zong;
               }

               //删除
               //na自己定义第一个值
               $scope.del = function(na) {
                   //confirm window系统自带调用判断弹出框
                   if(window.confirm("确定删除" + na + "吗？")) {
                       //遍历从 shops里面找到名字下标
                       for(index in $scope.shops) {
                           //如果名字存在则删除
                           if(na == $scope.shops[index].name) {
                               $scope.shops.splice(index, 1);
                           }
                       };
                       // 删除完购物车弹出为空
                       if($scope.shops.length == 0) {
                           $scope.myCrel = false;
                           alert("购物车为空")
                       }
                       alert(name);
                   }
                   //删除完总金额变化
                   $scope.zong = 0;
                   for(var i = 0; i < $scope.shops.length; i++) {
                       var xiaoji = $scope.shops[i].num * $scope.shops[i].price;
                       $scope.zong = $scope.zong - xiaoji;
                   }
               }

               //添加数据
               $scope.addShop = function() {
                   var flag1 = false;
                   var flag2 = false;
                   var flag3 = false;
                   var flag4 = false;
                   //判断非空
                   if($scope.newName == "" || $scope.newName == null) {
                       alert("输入不能为空");
                       flag1 = false;
                   } else {
                       flag1 = true;
                   }
                   //判断非空和非数字
                   if($scope.newName == "" || $scope.newName == null) {
                       alert("输入不能为空");
                       flag2 = false;
                   } else if(isNaN($scope.newNum)) {
                       alert("数量必须输入数字")
                       flag2 = false;
                   } else {
                       flag2 = true;
                   }

                   if($scope.newPrice == "" || $scope.newPrice == null) {
                       alert("输入不能为空");
                       flag3 = false;
                   } else if(isNaN($scope.newPrice)) {
                       alert("价格必须输入数字")
                       flag3 = false;
                   } else {
                       flag3 = true;
                   }
                   //点击添加显示数据
                   if(flag1 && flag2 && flag3) {
                       //把添加的数据放入shops 显示在table
                       $scope.shops.push({
                           name: $scope.newName,
                           num: $scope.newNum,
                           price: $scope.newPrice,
                       });
                       //定义总量先为空
                       $scope.zong = 0;
                       for(var i = 0; i < $scope.shops.length; i++) {
                           //计算小计
                           var xiaoji = $scope.shops[i].num * $scope.shops[i].price;
                           $scope.zong = xiaoji + $scope.zong;
                       }
                   }
               }
           });
       </script>
       <style>
           /*隔行变色*/

           .css1 {
               background-color: red;
           }

           .css2 {
               background-color: yellow;
           }
       </style>
   </head>

   <body ng-app="app" ng-controller="myCrel">
       <table border="1px" cellpadding="0" cellspacing="0" align="center">
           <thead>
               <tr style="background-color: blue;">
                   <td>序号</td>
                   <td>商品名称</td>
                   <td>数量</td>
                   <td>单价</td>
                   <td>小计</td>
                   <td>操作</td>
               </tr>
           </thead>
           <tbody>
               
               <tr ng-repeat="shop in shops" class="{{$even?'css1':'css2'}}">
                   <td>{{$index+1}}</td>
                   <td>{{shop.name}}</td>
                   <td>{{shop.num}}</td>
                   
                   <td>{{shop.price| currency:"RMB￥"}}</td>
                   <td>{{shop.num*shop.price|currency:"RMB￥"}}</td>
                   <td><input type="button" value="删除" ng-click="del(shop.name)" /></td>
               </tr>
               <tr>
                   
                   <td colspan="3" align="right">商品总金额</td>
                   <td colspan="2">{{zong|currency:"RMB￥"}}</td>
               </tr>
           </tbody>
       </table>
       <form style="margin-left: 350px;">
           
           商品名称:<input type="text" ng-model="newName" /><br /> 商品数量:
           <input type="text" ng-model="newNum" /><br /> 商品单价:
           <input type="text" ng-model="newPrice" /><br />
           <button ng-click="addShop()">添加</button>
       </form>
   </body>

</html>

I_do_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular 添加删除隔行变色

angularjs 1. 添加2. 删除3. currency过滤 var app = angular.module("app", []); app.controller("myCrel", function($scope
复制链接

扫一扫