用Angular写一个表格的节点的增删查等操作

最新推荐文章于 2021-10-30 20:01:07 发布

Castertonone

最新推荐文章于 2021-10-30 20:01:07 发布

阅读量337

点赞数

本文链接：https://blog.csdn.net/Castertonone/article/details/79059114

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../libs/angular.js"></script>
  <script src="../libs/jquery-1.11.0.min.js"></script>
     <script>
     var app=angular.module("myApp",[]);
     app.controller("myCtrl",function($scope){
       //初始数据
       $scope.shops = [{
     name:"小米",
     pass:2255,
     shuliang:3,
     danjia:3000

    }, {
     name:"外星人",
     pass:22554,
     shuliang:5,
     danjia:12000
    }, {
     name:"三星",
     pass:2255,
     shuliang:4,
     danjia:2000
    }];
    //全选、全不选
    $scope.selectAll = false;
    $scope.selectAllFun = function() {
     if($scope.selectAll) {
      for(index in $scope.shops) {
       $scope.shops[index].state = true;
      }
     } else {
      for(index in $scope.shops) {
       $scope.shops[index].state = false;
      }
     }
    }

    //反选
    $scope.checkSelAll = function() {
     var flag = false;
     for(index in $scope.shops) {
      if(!$scope.shops[index].state) {
       //满足条件
       flag = true;
      }
     }

     if(flag) {
      $scope.selectAll = false;
     } else {
      $scope.selectAll = true;
     }
    }
    //批量删除
    $scope.delSelect = function() {
     var selArr = [];
     for(index in $scope.shops) {
      if($scope.shops[index].state) {
       selArr.push($scope.shops[index].name)
      }
     }

     if(selArr.length <= 0) {
      alert("请先选择");
     } else {
      if(window.confirm("确定要删除吗？")) {
       for(index1 in selArr) {
        for(index2 in $scope.shops) {
         if(selArr[index1] == $scope.shops[index2].name) {
          $scope.shops.splice(index2, 1);
         }
        }
       }
      } else {

      }
     }
    }
    //删除
    $scope.remove = function(index){
     if(confirm("删除吗?")){
      $scope.shops.splice(index,1);
     }
    }
    //添加商品
    $scope.isShow = false;
    $scope.isShow2 = false;
    $scope.showForm = function() {
     if($scope.isShow) {
      $scope.isShow = false;
     } else {
      $scope.isShow = true;
     }
    }
    //判断名称是否重复
       $scope.submit = function() {
        for(index in $scope.shops) {
       if($scope.shops[index].name == $scope.newname) {
        alert("产品名称不能重复");
        $scope.errorArr.push("产品名称不能重复");

       }
      }
//        if($scope.errorArr.length > 0) {
//      //显示列表
//      $scope.isShow2 = true;
//     } else {
//      $scope.isShow2 = false;
        //添加数据
         var newShop = {
       pass: $scope.newpass,
       name: $scope.newname,
       shuliang: $scope.newnum,
       danjia: $scope.newprice
      };
      $scope.shops.push(newShop);
      $scope.isShow = false;
         //}
       }
       //总价
    $scope.totalPrice = function(){
     var totalPrice =0;
     for (var x=0;x<$scope.shops.length;x++) {
      totalPrice+=$scope.shops[x].shuliang * $scope.shops[x].danjia;
     }

     return totalPrice;
    };
       //总数
    $scope.totalNum = function(){
     var nums =0;
     for (var x=0;x<$scope.shops.length;x++) {
      nums+=$scope.shops[x].shuliang;
     }

     return nums;
    };
       //对数量进行减减
    $scope.jian = function(index){
     //alert(index);

     if($scope.shops[index].shuliang>1){   //数量是大小等于1的

      $scope.shops[index].shuliang--;
     }else{
      if(confirm("删除吗?")){
      $scope.shops.splice(index,1);
     }
      //alert("数量不能为负数");
     }

    }
    //加加的
    $scope.add = function(index){
     //alert(index);
     $scope.shops[index].shuliang++;

    }

  //修改价格
    $scope.update = function(shop){
     var newPrice = window.prompt("请输入要修改的"+shop.name+"商品的价格",shop.danjia);
     if(newPrice == null || newPrice == ""){
      alert("商品价格不能为空")
     }else if(isNaN(newPrice)){
      alert("商品价格必须是数字")
     }else{
      shop.danjia = parseInt(newPrice);
     }
    }
//    //搜索
//    $scope.sousuo = function() {
//
//    }
     });
     </script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="search" placeholder="商品名称"/>
     <table border="1px solid blue;" cellpadding="10" cellspacing="0">
     <thead>
       <tr>
      <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
      <th>产品名称</th>
      <th>产品号</th>
      <th>产品数量</th>
      <th>产品单价</th>
      <th>产品小计</th>
      <th><button ng-click="delSelect()">批量删除</button></th>
    </tr>
     </thead>
     <tbody>
       <tr ng-repeat="shop in shops | filter:{name:search} | orderBy:orderSel">
        <td><input type="checkbox" ng-model="shop.state" ng-click="checkSelAll()" /></td>
        <td>{{shop.name}}</td>
        <td>{{shop.pass}}</td>
        <td>
        <button ng-click="jian($index)">-</button>
     <input type="text" ng-model="shop.shuliang"/>
     <button ng-click="add($index)">+</button>
        </td>
        <td>{{shop.danjia}}</td>
        <td>{{shop.shuliang*shop.danjia}}</td>
           <th><button ng-click="remove($index)">删除</button>

   </th>
       </tr>
     </tbody>
     </table>
     <div>
   <h3>总价:{{totalPrice()}}</h3>

   <h3>总数:{{totalNum()}}</h3>

  </div>
  <button ng-click="showForm()">添加商品</button><br /><br />

<fieldset ng-show="isShow" id="" style="width: 400px;">
    <legend>添加商品</legend><br />
    <form>
  姓名：<input type="text" placeholder="请输入" ng-model="newname" /><br />
         密码：<input type="text" placeholder="请输入" ng-model="newpass" /><br />
          数量：<input type="text" placeholder="请输入" ng-model="newnum" /><br />
           单价：<input type="text" placeholder="请输入" ng-model="newprice" /><br />
     
    <ul ng-show="isShow2" style="width: 200px; background-color: #f89;">
      <li ng-repeat="error in errorArr">{{error}}</li>
     </ul>

</fieldset>
</body>
</html>