Angular を使用して三角矢印のラベル付け機能を実装する方法-jsチュートリアル-php.cn

Angular を使用して三角矢印のラベル付け機能を実装する方法

亚连

リリース： 2018-06-14 16:45:21

オリジナル

1841 人が閲覧しました

この記事では、Angular によって実装されたカスタムファジークエリ、ソート、三角矢印ラベル付け機能を主に紹介します。これには、ページテーブル要素に対する AngularJS のトラバーサル、クエリ、判断、ソート、その他の関連操作スキルが含まれます。この例では、Angular によって実装されたカスタムファジークエリ、並べ替え、三角矢印マーク機能について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

まず実行効果を見てみましょう:

具体的なコードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net Angular模糊查询、排序</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    table{
      border-collapse: collapse;
    }
    td{
      padding: 10px;
      border: 1px solid #000;
    }
    .top{
      display: inline-block;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-top:10px solid red;
    }
    .bot{
      display: inline-block;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-bottom:10px solid red;
    }
  </style>
  <script src="angular.min.js"></script>
  <script>
    var myapp=angular.module("myapp",[]);
    myapp.controller("myCtrl",function ($scope) {
      var userInfo=[
        {name:"marry",salary:12345,sex:"girl",birthday:1505111954735},
        {name:"Lily",salary:12425,sex:"girl",birthday:1505711954735},
        {name:"Jeny",salary:87145,sex:"girl",birthday:1505811954735},
        {name:"Rose",salary:23845,sex:"girl",birthday:1905111954735},
        {name:"Tom",salary:86565,sex:"boy",birthday:1575111994735}
      ];
      $scope.arr=userInfo;
      /*自定义的模糊查询*/
      $scope.search="";
      $scope.searchFun=function(obj){
        if($scope.search!=""){
          if(obj.name.toLowerCase().indexOf($scope.search.toLowerCase())!=-1){
            return true;
          }else{
            return false;
          }
        }else{
          return true;
        }
      };
      /* 排序*/
      $scope.sort="name";
      $scope.revers=false;
      $scope.sortFun=function (column) {
        if($scope.sort==column){
          $scope.revers=!$scope.revers;
        }else{
          $scope.revers=false;
        }
        $scope.sort=column;
      };
      $scope.getClass=function(column){
        if($scope.sort==column){
          if($scope.revers==false){
            return "top"
          }else{
            return "bot"
          }
        }
      }
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text"ng-model="search">
<table>
  <thead>
  <th>编号</th>
  <th ng-click="sortFun(&#39;name&#39;)">姓名<span ng-class="getClass(&#39;name&#39;)"></span></th>
  <th ng-click="sortFun(&#39;salary&#39;)">薪资<span ng-class="getClass(&#39;salary&#39;)"></span></th>
  <th ng-click="sortFun(&#39;sex&#39;)">性别<span ng-class="getClass(&#39;sex&#39;)"></span></th>
  <th ng-click="sortFun(&#39;birthday&#39;)">生日<span ng-class="getClass(&#39;birthday&#39;)"></span></th>
  </thead>
  <tbody>
  <tr ng-repeat="item in arr|filter:searchFun:value|orderBy:sort">
    <td>{{$index}}</td>
    <td>{{item.name|uppercase}}</td>
    <td>{{item.salary|currency:&#39;$&#39;}}</td>
    <td>{{item.sex}}</td>
    <td>{{item.birthday|date:&#39;yyyy-MM-dd&#39;}}</td>
  </tr>
  </tbody>
</table>
</body>
</html>

ログイン後にコピー

注: コードの一部がまだありますこれらは完全には機能していないため、興味のある友人が自分で追加できます。

上記は私があなたのためにまとめたものです。

webpack を介して koa2 フレームワークアプリをパッケージ化する方法、その方法は?

Vue コンポーネント開発アイデアの詳細な解釈

Vue.js でのコンポーネントとその機能の使用方法の詳細な解釈?

以上がAngular を使用して三角矢印のラベル付け機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。