使用angularjs实现查询、增加验证、修改、删除、以及批量删除等

样式包括隔行变色以及高亮显示

    <style type="text/css">
             #t tr{
                background-color: #fff;
             }
             #t  tr:nth-child(2n){
                 background-color: #bbb;
             }
            /*高亮显示*/
             #t tr:hover{
                background-color: greenyellow
            }
            
            
        </style>

 /////angularjs

<script>
            angular.module("myapp",[])
            .controller("democ",function($scope,$http){
                $scope.mouth=["01","02","03","04","05","06","07","08","09","10","11","12"];
                $http.get("phones.json").success(function(resp){
                    $scope.list=resp;
                })
                
                ///点击发货进行显示
                 $scope.show=function(v){
                     $scope.list[v].zt="已发货";
                 }
                
                
                 //点击修改信息的按钮    
                  $scope.qqq = -1;
                $scope.xiu=function(v){
                    if($scope.qqq == v){
                            //获得输入框中的值
                          var sname = document.getElementsByName("sname")[v].value;
                          var user = document.getElementsByName("user")[v].value;
                          var num = document.getElementsByName("num")[v].value;
                          var price = document.getElementsByName("price")[v].value;
                          var city = document.getElementsByName("city")[v].value;
                          var shijian = document.getElementsByName("shijian")[v].value;
                          
                            $scope.list[v].sname=sname;
                            $scope.list[v].user=user;
                            $scope.list[v].num=num;
                            $scope.list[v].price=price;
                            $scope.list[v].city=city;
                            $scope.list[v].shijian=shijian;
                            $scope.qqq=-1;
                    }else{
                        $scope.qqq = v;
                    }
                }
                //点击删除按钮
                  $scope.del=function(a){
                       $scope.list.splice(a,1);
                  }
                
                //批量发货
                  $scope.pfa=function(){
                      //遍历数组 先进行判断是否为发货状态
                      for(var i=0;i<$scope.list.length;i++){
                          if($scope.list[i].zt=="发货"){
                              $scope.list[i].zt="已发货";
                          }
                      }
                  }
                  //批量删除
                   $scope.pshan=function(){
                       //先判断多选框有没有被选中
                       var cks = document.getElementsByName("ck") ;
                       //进行便利  如果是选中状态则删除
                        var j=0;
                       for(var i=0;i<cks.length;i++){
                         if(cks[i].checked){
                            $scope.list.splice((i-j),1);
                               j++;
                          }
                       }
                   }
                //全选
                $scope.quanxuan=function(){
                    //得到各个小框
                    var cks = document.getElementsByName("ck") ;
                    for(var i=0;i<cks.length;i++){
                        //状态与全选框相同
                        cks[i].checked=$scope.qx;
                    }
                }
                //点击新增订单
                $scope.add=function(){
                    //添加信息的表格出现
                    var table = document.getElementById("tab")
                    table.style.display="block";
                }
                    var i=10;
                    var a=100;
                //点击添加信息表格的提交按钮
                  $scope.tijiao=function(){
                      //存放错误信息的数组
                    $scope.shuzu=[];
                    //判断是否显示
                       $scope.isshow=false;
                      //验证信息 姓名 价格
                      if($scope.iname==""||$scope.iname==undefined){
                          $scope.shuzu.push("商品名不能为空！");
                      }else if($scope.iname.length<3||$scope.iname.length>8){
                          $scope.shuzu.push("商品名长度在3-8之间！");
                      }
                      //验证价格   必须为数字
                      if(! /^\d+$/.test($scope.iprice)){
                          $scope.shuzu.push("价格必须为有效数字！");
                      }
                      if($scope.shuzu.length>0){
                        $scope.isshow=true;
                      
                      }else{
                          //获得信息存进数组里
                      i++;
                      a=a+10;
                      $scope.list.push({"id":i,"sname":$scope.iname,"user":$scope.iuser,"num":a,"price":$scope.iprice,"city":$scope.icity,"shijian":$scope.itime,"zt":$scope.istate});
                   //表格消失
                   var table = document.getElementById("tab")
                    table.style.display="none";
                    //提示错误消失
                   $scope.isshow=false;
                      }
                  }
            
            })
        </script>

///////视图