Angular로 구현된 테이블 테이블 정렬 기능의 완전한 예제

이 문서는 Angular로 구현된 table 테이블 정렬 기능에 대해 설명합니다. 여러분과 공유하고, 구체적으로 다음과 같습니다：

먼저 효과 그림을 보겠습니다：

전체 코드는 다음과 같습니다：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" /><br
    <title>ko.oldtoolbag.com 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('11-23 10:00:00'),state:"已发货"},
        {state1:false,id:3007,name:\"iphone6",username:\"王红\",tel:18524565588,price:5635,city:\"郑州\",time:new Date('11-23 11:38:20'),state:"已发货"},
        {state1:false,id:5312,name:\"iphone7",username:\"赵小龙\",tel:17545585598,price:6180,city:\"北京\",time:new Date('11-23 9:17:00'),state:"未发货"},
        {state1:false,id:2132,name:\"iphone8",username:\"赵强\",tel:17625565618,price:7190,city:\"上海\",time:new Date('11-23 10:40:00'),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">
    >-click="toto=true" style="background-color: greenyellow;">新增订单</button>저장<
    >-click="del()" style="background-color: greenyellow;">批量删除</button>저장<
    <input type="text" placeholder="상품 이름으로 검색" ng-model="selname" /><br
    <input type="text" placeholder="휴대폰 번호로 검색" ng-model="seltel"/><br
    select ng-model="selstate">
      <option value="">상태별 검색</<option value="郑州">郑州<
      <option value="已发货">발송완료</<option value="郑州">郑州<
      <option value="未发货">미발송</<option value="郑州">郑州<
    </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='id';flag=!flag" style="background-color: greenyellow;">정렬</button></td>
        <td>상품명</td>
        <td>사용자명</td>
        <td>휴대폰번호</td>
        <td>가격<button ng-click="px='price';flag=!flag" style="background-color: greenyellow;">정렬</button></td>
        <td>도시</td>
        <td>주문시간<button ng-click="px='time';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 : 'MM-HH hh:dd:ss'}}</td>
        <td><span ng-show="s.state=='발송완료'" style="color: greenyellow;">{{s.state}}</span>
              <span ng-show="s.state=='미발송'" style="color: yellow;"><a href="#" rel="external nofollow" ng-click="s.state='발송완료'">{{s.state}}</a></span></td>
      </tr>
    </table>
    <div style="마진-top: 50px; 마진-left: 10left:
      0px;">-<form ng
        show="toto"> / 상품 이름：<input type="text"-ng /select><br /><br
      model="sname" id="s"><br-사용자 이름：<input type="text" ng/select><br /select><br /><br
      model="susername"id="y"-휴대폰 번호：<input type="text" ng/select><br /select><br /><br
      model="stel" id="t"-가격이：<input type="text" ng/select><br /select><br /><br
      model="sprice" id="p"-도시：<select ng
        model="scity">--<option value="">--</<option value="郑州">郑州<
        도시 선택/<option value="郑州">郑州<
        <option value="北京">北京</<option value="郑州">郑州<
        <option value="上海">上海</<option value="郑州">郑州<
      </option> /select><br /><br
      >-<button ng/button>저장<
      </form>
    </div>
  </body>
</html>

AngularJS와 관련된 더 많은 내용에 관심이 있는 독자는 다음 사이트의 특辑을 확인해 주세요: 《AngularJS 지시 작업 기술 요약》、《AngularJS 입문 및 고급 교재》 및 《AngularJS MVC 아키텍처 요약》

이 문서에서 설명한 내용이 AngularJS 프로그램 설계에 도움이 되길 바랍니다.

선언: 이 문서의 내용은 인터넷에서 가져왔으며, 원작자의 소유물입니다. 이 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공적인 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반이 의심되는 내용이 있으시면, notice#w로 이메일을 보내 주세요.3codebox.com（보내실 때, #을 @으로 변경해 주세요. 신고를 하시고, 관련 증거를 제공하시면, 해당 내용이 실제로 위반된다는 것이 확인되면, 이 사이트는 즉시 해당 위반 내용을 삭제합니다.）

기본 가이드

추천해드립니다