Rumah > Artikel > hujung hadapan web > 在Angular中如何实现table表格排序

在Angular中如何实现table表格排序

亚连asal: 2018-06-19 10:02:451943semak imbas

这篇文章主要介绍了Angular实现的table表格排序功能,结合完整实例形式分析了AngularJS表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下

本文实例讲述了Angular实现的table表格排序功能。分享给大家供大家参考，具体如下：

先来看看效果图：

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>www.jb51.net 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 type="text/javascript" src="js/angular.min.js" ></script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></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>
  </head>
  <body ng-app="MyApp" ng-controller="demoC">
    <button ng-click="toto=true" style="background-color: greenyellow;">新增订单</button>
    <button ng-click="del()" style="background-color: greenyellow;">批量删除</button>
    <input type="text" placeholder="按商品名称查询" ng-model="selname" />
    <input type="text" placeholder="按手机号查询" ng-model="seltel"/>
    <select ng-model="selstate">
      <option value="">按状态查询</option>
      <option value="已发货">已发货</option>
      <option value="未发货">未发货</option>
    </select>
    <table cellpadding="0px" cellspacing="0px">
      <tr style="background-color: gray;">
        <td><input type="checkbox" ng-model="ckall" ng-click="ckAll()"></td>
        <td>id<button ng-click="px=&#39;id&#39;;flag=!flag" style="background-color: greenyellow;">排序</button></td>
        <td>商品名</td>
        <td>用户名</td>
        <td>手机号</td>
        <td>价格<button ng-click="px=&#39;price&#39;;flag=!flag" style="background-color: greenyellow;">排序</button></td>
        <td>城市</td>
        <td>下单时间<button ng-click="px=&#39;time&#39;;flag=!flag" style="background-color: greenyellow;">排序</button></td>
        <td>状态</td>
      </tr>
      <tr ng-repeat="s in shop | filter:{name:selname} | filter:{tel:seltel} | filter:{state:selstate} | orderBy:px:flag ">
        <td><input type="checkbox" ng-model="s.state1"></td>
        <td>{{s.id}}</td>
        <td>{{s.name}}</td>
        <td>{{s.username}}</td>
        <td>{{s.tel}}</td>
        <td>{{s.price | currency:"￥"}}</td>
        <td>{{s.city}}</td>
        <td>{{s.time | date : &#39;MM-HH hh:dd:ss&#39;}}</td>
        <td><span ng-show="s.state==&#39;已发货&#39;" style="color: greenyellow;">{{s.state}}</span>
              <span ng-show="s.state==&#39;未发货&#39;" style="color: yellow;"><a href="#" rel="external nofollow" ng-click="s.state=&#39;已发货&#39;">{{s.state}}</a></span></td>
      </tr>
    </table>
    <p style="margin-top: 50px; margin-left: 100px;">
      <form ng-show="toto">
        商品名：<input type="text" / ng-model="sname" id="s"><br /><br />
      用户名：<input type="text" ng-model="susername"id="y"/><br /><br />
      手机号：<input type="text" ng-model="stel" id="t"/><br /><br />
      价格为：<input type="text" ng-model="sprice" id="p"/><br /><br />
      城市：<select ng-model="scity">
        <option value="">--选择城市--</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="郑州">郑州</option>
      </select><br /><br />
      <button ng-click="add()">保存</button>
      </form>
    </p>
  </body>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

在vue中常用组件和框架结构（详细教程）

在fastclick代码中如何解决tap“点透”

在anime.js中如何实现动画效果的复选框

在Parcel.js + Vue 2.x中如何做到极速零配置打包

使用Vue时浏览器后退无法触发beforeRouteLeave的问题

在vue + element中如何实现表格分页

在微信小程序中如何实现录音与播放录音功能

Nuxt.js框架（详细教程）

在JS+CSS中如何实现滚动数字时钟

Atas ialah kandungan terperinci 在Angular中如何实现table表格排序. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：在Angular中如何实现验证Artikel seterusnya：在Vue中有关于localstorage和sessionstorage如何使用

Artikel berkaitan

Lihat lagi