Angular operates the table to sort it

This time I will bring you Angular to sort the table table. What are the precautions for Angular to sort the table table? The following is a practical case, let's take a look.

The complete code is as follows:

nbsp;html>

  
    <meta>
    <title> Angular表格排序</title>
    <style>
      table{
        border: 1px solid;
        text-align: center;
        width: 40%;
        height: 400px;
      }
      tr,td{
        border: 1px solid;
      }
      tr:nth-child(2n){
        background: gainsboro;
      }
    </style>
    <script></script>
    <script></script>
    <script>
      var app=angular.module("MyApp",[]);
      app.controller("demoC",["$scope",function($scope){
        $scope.shop=[{ state1:false,id:9001,name:"iphoneX",username:"张三",tel:13525565588,price:8699,city:"北京",time:new Date(&#39;11-23 10:00:00&#39;),state:"已发货"},
        {state1:false,id:3007,name:"iphone6",username:"王红",tel:18524565588,price:5635,city:"郑州",time:new Date(&#39;11-23 11:38:20&#39;),state:"已发货"},
        {state1:false,id:5312,name:"iphone7",username:"赵小龙",tel:17545585598,price:6180,city:"北京",time:new Date(&#39;11-23 9:17:00&#39;),state:"未发货"},
        {state1:false,id:2132,name:"iphone8",username:"赵强",tel:17625565618,price:7190,city:"上海",time:new Date(&#39;11-23 10:40:00&#39;),state:"未发货"}
        ];
        $scope.ckAll=function(){
          for(var i in $scope.shop){
            $scope.shop[i].state1=$scope.ckall;
          }
        }
        $scope.del=function(){
            for(var i=0; i<$scope.shop.length; i++){
              if($scope.shop[i].state=="已发货"&&$scope.shop[i].state){
                $scope.shop.splice(i,1);
                i--;
                }
                }
        }
        $scope.add=function(){
          var sname=$scope.sname;
          var susername=$scope.susername;
          var stel=$scope.stel;
          var sprice=$scope.sprice;
          var scity=$scope.scity;
          if(sname==undefined || sname==""){
            alert("用户名不能为空");
            $("#s").css("border-color","red");
          }else if(susername==undefined || susername==""){
            alert("商品名不能为空");
            $("#y").css("border-color","red");
          }else if(stel==undefined || stel==""){
            alert("手机号不能为空");
            $("#t").css("border-color","red");
          }else if(sprice==undefined || sprice==""){
            alert("价格不能为空");
            $("#p").css("border-color","red");
          }else if(scity==undefined || scity==""){
            alert("城市必须选择");
          }
          else{
            $scope.shop.push({name:sname,username:susername,tel:stel,price:sprice,city:scity})
            $scope.toto=false;
          }
        }
      }])
    </script>
  
  
    <button>新增订单</button>
    <button>批量删除</button>
    <input>
    <input>
    <select>
      <option>按状态查询</option>
      <option>已发货</option>
      <option>未发货</option>
    </select>
    

                                                                                                                                                                                                  

	id排序	商品名	用户名	手机号	价格排序	城市	下单时间排序	状态
	{{s.id}}	{{s.name}}	{{s.username}}	{{s.tel}}	{{s.price | currency:"￥"}}	{{s.city}}	{{s.time | date : 'MM-HH hh:dd:ss'}}	{{s.state}}               {{s.state}}

    

      

        商品名：

      用户名：

      手机号：

      价格为：

      城市：         --选择城市--         北京         上海         郑州       

      保存       

        I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

The above is the detailed content of Angular operates the table to sort it. For more information, please follow other related articles on the PHP Chinese website!