zoukankan      html  css  js  c++  java
  • 如何angular过滤器进行排序???

    首先定义一个json文件:

    然后写HTML文件:

     1 <div id="box">
     2             <!--第一个下拉框-->
     3             <select ng-model="a">
     4                 <option value="age">按照年龄排序</option>
     5                 <option value="code">按照编码排序</option>
     6                 <option value="name">按照姓名排序</option>
     7             </select>
     8             <!--升序还是降序-->
     9             <select ng-model="b">
    10                 <option value="">升序</option>
    11                 <option value="-">降序</option>
    12             </select>
    13             <!--一个搜索框-->
    14             <input type="text" placeholder="请输入要搜索的内容" ng-model="c"/>
    15         </div>
    16         <!--渲染的数据-->
    17         <div id="wrap">
    18             <table>
    19                 <tr>
    20                     <th>编码</th>
    21                     <th>姓名</th>
    22                     <th>年龄</th>
    23                 </tr>
    24                 <tr ng-repeat="item in data|filter:c|orderBy:b+a">
    25                     <td>{{item.code}}</td>
    26                     <td>{{item.name}}</td>
    27                     <td>{{item.age}}</td>
    28                 </tr>
    29             </table>
    30         </div>
    31         

    angular:

    1 <script>
    2             var app = angular.module("mk",[]);
    3             app.controller("test",function($scope,$http){
    4                 $http.get('json/index.json').success(function(data){
    5                         $scope.data = eval(data);
    6                         $scope.a = "code";
    7                 })
    8             })
    9         </script>

    在这种运用到的过滤器有filter 、orderBy

    这样就完成了一个简单的排序,希望能帮到大家!!!!!!!!

  • 相关阅读:
    LeetCode 43 字符串相乘
    HDU 1031 Design T-Shirt
    HDU 1728 逃离迷宫
    HDU 1285 确定比赛名次
    HDU 1116 Plays on words
    HDU 1195 Open the lock
    HDU 1072 Nightmare
    HDU 1272 小希的迷宫
    HDU 1273 漫步森林
    HDU 1269 迷宫城堡
  • 原文地址:https://www.cnblogs.com/user-5253/p/7082717.html
Copyright © 2011-2022 走看看