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

    <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>

///视图

 

<body ng-app="myapp" ng-controller="democ">
         <input value="用户名搜索" ng-model="uss"/>
         <input value="手机号搜索" ng-model="pss"/>
         <select  ng-model="citys">
             <option value="">选择城市</option>
             <option>北京</option>
             <option>上海</option>
             <option>广州</option>
             <option>深圳</option>
         </select>
         <select  ng-model="zhuangtai">
             <option value="">选择状态</option>
             <option>已发货</option>
             <option>发货</option>
             <option>已收货</option>
         </select>
        
         <select  ng-model="startM" >
             <option value="">开始月份</option>
             <option ng-repeat="mm in mouth">{{mm}}</option>
         </select>
        
         <select  ng-model="endM" >
             <option value="">结束月份</option>
             <option ng-repeat="mm in mouth">{{mm}}</option>
         </select>
         <input type="button" value="查询" /><br />
         <input type="button" value="新增订单" style="background-color: greenyellow;" ng-click="add()"/>
         <input type="button" value="批量发货" style="background-color: greenyellow;" ng-click="pfa()"/>
         <input type="button" value="批量删除" style="background-color: red"  ng-click="pshan()"/>
        
         <table id="t" border="1px solid black" >
             <tr style="background-color: #999;">
                 <th><input type="checkbox" ng-change="quanxuan()" ng-model="qx"/></th>
                 <th ng-click="title='id';desc=!desc">ID</th>
                 <th ng-click="title='sname';desc=!desc">商品名</th>
                 <th ng-click="title='user';desc=!desc">用户名</th>
                 <th>手机号</th>
                 <th ng-click="title='price';desc=!desc">价格</th>
                 <th>城市</th>
                 <th ng-click="title='shijian';desc=!desc">下单时间</th>
                 <th>状态</th>
                 <th>操作</th>
             </tr>
             <tr  ng-repeat="item in list | orderBy:title:desc |filter:{'user':uss,'num':pss,'city':citys,'zt':zhuangtai}"name="tt">
                 <td><input type="checkbox" name="ck" /></td>
                 <td>
                  {{item.id}}                 
                 </td>
                 <td>
                 <span ng-show="$index!=qqq">{{item.sname}}</span>
                 <span ng-show="$index==qqq"><input type="text" value="{{item.sname}}" name="sname"/></span>
                 </td>
                 <td>
                 <span ng-show="$index!=qqq">{{item.user}}</span>
                 <span ng-show="$index==qqq"><input type="text" value="{{item.user}}" name="user"/></span>    
                 </td>
                 <td>
                 <span ng-show="$index!=qqq">{{item.num}}</span>
                 <span ng-show="$index==qqq"><input type="text" value="{{item.num}}" name="num"/></span>    
                 </td>
                 <td>
                 <span ng-show="$index!=qqq">{{item.price|currency:"￥"}}</span>
                 <span ng-show="$index==qqq"><input type="text" value="{{item.price}}" name="price"/></span>    
                 </td>
                 <td>
                 <span ng-show="$index!=qqq">{{item.city}}</span>
                 <span ng-show="$index==qqq"><input type="text" value="{{item.city}}" name="city"/></span>    
                 </td>
                 <td>
                 <span ng-show="$index!=qqq">{{item.shijian}}</span>
                 <span ng-show="$index==qqq"><input type="text" value="{{item.shijian}}" name="shijian"/></span>    
                 </td>
                 <td>
                     <span ng-show="item.zt=='已发货'||item.zt=='已收货'">{{item.zt}}</span>
                     <span ng-show="item.zt=='发货'"><a href="#" ng-click="show($index)">{{item.zt}}</a></span>
                 </td>
                 <td>
                     <a href="#" ng-click="xiu($index)">修改</a>
                     <a href="#" ng-click="del($index)">删除</a>
                 </td>
             </tr>
             
         </table>
        
         <table id="tab" style="display: none;">
             <tr>
                 <td>商品名称</td>
                 <td><input type="text" ng-model="iname" /></td>
             </tr>
             <tr>
                 <td>用户名</td>
                 <td><input type="text" ng-model="iuser" /></td>
             </tr>
             <tr>
                 <td>价格</td>
                 <td><input type="text" ng-model="iprice" /></td>
             </tr>
             <tr>
                 <td>城市</td>
                 <td><input type="text" ng-model="icity" /></td>
             </tr>
             <tr>
                 <td>下单时间</td>
                 <td><input type="text" ng-model="itime" /></td>
             </tr>
             <tr>
                 <td>状态</td>
                 <td><input type="text" ng-model="istate" /></td>
             </tr>
             <tr>
                 <td colspan="2"><input type="button" value="提交" ng-click="tijiao()"/></td>
             </tr>
         </table>
         <div style="width: 400px;background-color: aquamarine;">
        <ul ng-show="isshow">
            <li ng-repeat="s in shuzu">{{s}}</li>
        </ul>
         </div>
    </body>