English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホーム
  3. 経験記録
  4. 本文

Angularでtableテーブルのソート機能を実現する完全な例

この記事では、Angularで実現したtableテーブルのソート機能について説明します。皆さんに参考にしていただければ幸いです。以下の通りです：

まずは効果画像を見てみましょう：

以下は完全なコードです：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" /><br
    <title>ja.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">
      
        id商品名用户名手机号价格城市下单时间状态
        {{s.id}}{{s.name}}{{s.username}}{{s.tel}}{{s.price | currency:"￥"}}{{s.city}}{{s.time | date : 'MM-HH hh:dd:ss/td>
        <td><span ng-show="s.state=='発送済み'" style="色: グリーンイエロー;">{{s.state}}</span>
              <span ng-show="s.state=='未発送'" style="色: やぎわし;">
<a href="#" rel="外部フォロワー無効" ng-click="s.state='発送済み'">{{s.state}}</a></span></td>
      </tr>
    </テーブル>
    <div style="マージン-トップ: 50px; マージン-right: 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#oldtoolbag.com（メールを送信する際には、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、本サイトは侵害が疑われるコンテンツをすぐに削除します。）

基礎教程
おすすめ