用Angular写一个表格的节点的增删查等操作（带全部修改的版本）_angular里面有一个表格,表格里面有一个修改按钮,点击弹出页面,在页面里面修改信息-CSDN博客

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

这个示例展示了如何使用AngularJS来实现表格数据的增删查改功能，包括全选/全不选、反选、下拉菜单排序、批量删除、添加商品、删除商品、数量加减以及修改数据。通过HTML、CSS和JavaScript交互，创建了一个交互式的表格应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title></title>
  <style>
   /*隔行变色(实现)*/

   .css1 {
    background-color: antiquewhite;
   }

   .css2 {
    background-color: burlywood;
   }
   /*按钮变小手*/

   .sb {
    cursor: pointer;
   }
  </style>

  <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: 223,
          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.orderSel = "";     //批量删除

    $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("产品名称不能重复");
      } else if($scope.newname == "" || $scope.newname == null) {
       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.updateShowFun = function(shop) {
     $scope.updateId = shop.pass;
     $scope.updateName = shop.name;
     $scope.updateTel = shop.shuliang;
     $scope.updateHobby = shop.danjia;
    }
    $scope.updateData = function() {
     $scope.updateArr = [];
     for(index in $scope.shops) {
      if(parseInt($scope.updateId) == $scope.shops[index].pass) {
       $scope.shops[index].name = $scope.updateName;
       $scope.shops[index].shuliang = $scope.updateTel;
       $scope.shops[index].danjia = $scope.updateHobby;
      }
     }
    }
    //   //修改价格
    //    $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);
    //     }
    //    }
    //     <button ng-click="update(shop)" class="sb">修改价格</button>
    //    //搜索
    //    $scope.sousuo = function() {
    //
    //    }

   });
  </script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="search" placeholder="商品名称" />
  <select ng-model="orderSel">
   <option value="">--请选择--</option>
   <option value="pass">--id正序--</option>
   <option value="-pass">--id逆序--</option>
   <option value="danjia">--价格正序--</option>
   <option value="-danjia">--价格逆序--</option>
  </select>

  <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()" class="sb">批量删除</button></th>
     </tr>
    </thead>

   <tbody>

    <tr ng-repeat="shop in shops | filter:{name:search} | orderBy:orderSel" class="{{ $even ? 'css1':'css2'}}">

     <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)" class="sb">-</button>
      <input type="text" ng-model="shop.shuliang" />
      <button ng-click="add($index)" class="sb">+</button>         </td>

     <td>{{shop.danjia}}</td>

     <td>{{shop.shuliang*shop.danjia}}</td>

     <td><button ng-click="remove($index)" class="sb">删除</button>
      <button style="color: red; text-decoration: underline; border: none;" ng-click="updateShowFun(shop)">修改</button>    </td>
     </tr>
    </tbody>
   </table>

  <div>

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

<form style="border: 1px solid black; width: 600px;">
   <h3>修改用户</h3> id:
   <input type="text" placeholder="请输入新修改id" ng-model="updateId" disabled="disabled" /><br /><br /> 姓名:
   <input type="text" placeholder="请输入新修改姓名" ng-model="updateName" /><br /><br /> 数量:
   <input type="text" placeholder="请输入新修改数量" ng-model="updateTel" /><br /><br /> 单价:
   <input type="text" placeholder="请输入新修改单价" ng-model="updateHobby" /><br /><br />
   <input type="button" value="修改" ng-click="updateData()" />
   <input type="reset" value="清空" /><br />
  </form>
  <button ng-click="showForm()" class="sb">添加商品</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="number" 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>
    <input ng-click="submit()" type="button" value="添加" class="sb" />
   </form>

</fieldset>
</body>

</html>