表格2：《查询 + 排序 + 修改 + 删除 + 添加 + 判断》_查看新增修改删除导出筛选排序搜索-CSDN博客

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>必须过</title>

       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <style type="text/css">
           select {
               width: 160px;
               height: 22px;
           }
           table{
               width: 60%;
               text-align: center;
           }
           span{
               color: red;
           }
       </style>

   </head>

   <body ng-app="myapp" ng-controller="mycon">

       <center>
           <div id="div1">
               查询：<input type="" name="" id="" value="" ng-model="cha" />
               排序：
               <select name="" ng-model="orderby_" >
                   <option value="">--选择排序--</option>
                   <option value="name">按照名称正序</option>
                   <option value="-name">按照名称倒叙</option>
                   <option value="jiaqian">按照价钱正序</option>
                   <option value="-jiaqian">按照价钱倒叙</option>
               </select>
               <input type="button" name="" id="" value="入库增加" ng-click="isShow=!isShow" />
               <br />
               <br />
               <div id="div1_1" ng-show="isShow">
                   商品名称：<input type="" name="" id="" value="" ng-model="name_"/><span id="a1"></span><br />
                   商品价格：<input type="" name="" id="" value="" ng-model="jiaqian_"/><span id="a2"></span><br />
                   商品产地：<input type="" name="" id="" value="" ng-model="dizhi_"/><span id="a3"></span><br />
                   <br />
                   <input type="button" name="" id="" value="添加" ng-click="insert_()" />
               </div>
               <br />
               <input type="button" name="" id="" value="批量删除" ng-click="delect_1()" />
           </div>
           <div id="div2">
               <table border="1" cellspacing="0" cellpadding="0">
                   <thead>
                       <tr>
                           <th><input type="checkbox" ng-model="check_"/></th>
                           <th>序号</th>
                           <th>ID</th>
                           <th>商品名称</th>
                           <th>价钱</th>
                           <th>产地</th>
                           <th>操作</th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr ng-repeat="x in addll|orderBy:orderby_|filter:cha">
                           <td><input type="checkbox" name="" id="" value="{{$index}}" ng-model="check_" /></td>
                           <td>{{$index}}</td>
                           <td>{{x.ID}}</td>
                           <td>{{x.name}}</td>
                           <td>{{x.jiaqian}}</td>
                           <td>{{x.dizhi}}</td>
                           <td>
                               <input type="button" name="" id="" value="删除" ng-click="delect_2(x.name)" />  
                               <input type="button" name="" id="" value="修改" ng-click="update_2(x.name)" />
                           </td>
                       </tr>
                   </tbody>
               </table>
               <br />
               
               <div id="div3" ng-show="isShow1">
                   商品名称：<input type="text" name="" id="" value="" ng-model="name1" /><br />
                   商品价格：<input type="text" name="" id="" value="" ng-model="jiage1"/><br />
                   商品产地：<input type="text" name="" id="" value="" ng-model="chandi1"/><br />
                   <input type="button" name="" id="" value="提交修改" ng-click="tjxg_()" />
               </div>


           </div>
       </center>

       <script type="text/javascript">
           var app = angular.module("myapp", []);
           app.controller("mycon", function($scope) {

               //显示添加组件
               $scope.isShow = false;
               $scope.isShow1= false;
               //定义添加空值
               $scope.name_="";
               $scope.jiaqian_="";
               $scope.dizhi_="";

               //定义修改信息的值
               var bbb="";
               $scope.name1="";
               $scope.jiage1="";
               $scope.chandi1="";



               //获取数据集合
               $scope.addll = [{
                   ID: 1,
                   name: "苹果",
                   jiaqian: 5999,
                   dizhi: "京东"
               }, {
                   ID: 2,
                   name: "戴尔",
                   jiaqian: 6888,
                   dizhi: "淘宝"
               }, {
                   ID: 3,
                   name: "耳机",
                   jiaqian: 388,
                   dizhi: "国贸"
               }, {
                   ID: 4,
                   name: "电脑",
                   jiaqian: 9999,
                   dizhi: "阿里巴巴"
               }];

               //点击批量删除
               $scope.delect_1=function(){
                   var deall=$("input:checked");//选中的删除
                        for (var i = deall.length-1; i >=0; i--) {
                       //得到序号--从0开始
                       var index=deall[i].value;
                       //进行删除
                       $scope.addll.splice(index,1);
                   }
               }



               //点击修改出现页面
               $scope.update_2=function(index_){
                   $scope.isShow1= true;
                   for (var i = 0; i < $scope.addll.length; i++) {
                       if ($scope.addll[i].name==index_) {
                           bbb=$scope.addll[i];
                           break;
                       }

                   }
                   $scope.name1=bbb.name;
                   $scope.jiage1=bbb.jiaqian;
                   $scope.chandi1=bbb.dizhi;
               }
               //点击提交修改页面显示隐藏
               $scope.tjxg_=function(){
                   $scope.isShow1= false;
                   bbb.name=$scope.name1;
                   bbb.jiaqian=$scope.jiage1;
                   bbb.dizhi=$scope.chandi1;

               }
               //点击保存添加数据
               $scope.insert_=function(){
                   //判断商品为空
                   var name=$scope.name_;
                   if (name=="") {
                       $("#a1").html("商品不能为空");
                   } else{
                       $("#a1").html("");
                   }//判断价钱为空
                   var jiaqian=$scope.jiaqian_;
                   if (jiaqian=="") {
                       $("#a2").html("价钱不能为空");
                   } else{
                       $("#a2").html("");
                   }//判断地址为空
                   var dizhi=$scope.dizhi_;
                   if (dizhi=="") {
                       $("#a3").html("地址不能为空");
                   } else{
                       $("#a3").html("");
                   }
                   //点击保存添加数组
                   var aaa={};
                   aaa.name=$scope.name_;
                   aaa.jiaqian=$scope.jiaqian_;
                   aaa.dizhi=$scope.dizhi_;
                   $scope.addll.push(aaa);



               }

               //点击删除删除一行数据
               $scope.delect_2=function(gname_){
                   for (var i = 0; i < $scope.addll.length; i++) {
                       if ($scope.addll[i].name=gname_) {
                           $scope.addll.splice(i,1);
                       }
                       break;
                   }
               }



           })
       </script>
   </body>

</html>