码迷,mamicode.com
首页 > Web开发 > 详细

angularJS可以实现常常看到购物车中的升序降序效果

时间:2017-06-22 23:00:48      阅读:312      评论:0      收藏:0      [点我收藏+]

标签:hold   打开   span   ng-repeat   hal   app   http   控制器   编号   

{
"xinxi":[
    {"id":100,"name":"baobo","age":12},
    {"id":99,"name":"paopo","age":18},
    {"id":50,"name":"xinxin","age":55},
    {"id":55,"name":"angular","age":20},
    {"id":75,"name":"chali","age":15},
    {"id":85,"name":"each","age":60},
    {"id":98,"name":"hello","age":19},
    {"id":68,"name":"zizizi","age":28},
    {"id":66,"name":"gegege","age":56},
    {"id":77,"name":"fufuf","age":43},
    {"id":42,"name":"baobo","age":12},
    {"id":54,"name":"menmen","age":32},
    {"id":88,"name":"qqqq","age":71},
    {"id":69,"name":"laowang","age":22},
    {"id":53,"name":"wangwang","age":99},
    {"id":1,"name":"dadad","age":88}
    ]
}

//创建一条json数组

 

 

获取到数组的内容显示页面

 1 <!DOCTYPE html>
 2 <html ng-app="atr">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="angular.min.js"></script>
 7         <script>
 8             var app=angular.module(atr,[]);//创建模块
 9             app.controller(test,function($scope,$http){//创建控制器test $http取json数据
10                 $http.get(data.json).success(function(data){
11                     $scope.arr=data;
12                     $scope.selProp="id";
13                     $scope.selBy=1;
14                 })
15             })
16         </script>
17     </head> 
18     <body ng-controller="test">
19         <select name="" ng-model="selProp">
20             <option value="id">编号排序</option><!--value是查找数组下标第一个-->
21             <option value="name">姓名排序</option>
22             <option value="age">年龄排序</option>
23         </select>
24         <select name="" ng-model="selBy">
25             <option value="1">升序</option><!--升序用1表示-->
26             <option value="-1">降序</option>
27         </select>
28         <input type="text" placeholder="搜索内容" ng-model="value"/>
29         <table border="1" cellspacing="0" cellpadding="0">
30             <tr>
31                 <th>编号</th>
32                 <th>姓名</th>
33                 <th>年龄</th>
34             </tr>                        <!--筛选 filter--> <!--排序数组 三目条件-->
35             <tr ng-repeat="value in arr | filter:value | orderBy:selBy == 1 ? selProp:‘-‘ + selProp">
36                 <td>{{value.id}}</td>
37                 <td>{{value.name}}</td>
38                 <td>{{value.age}}</td>
39             </tr>
40         </table>
41     </body>
42 </html>

 

 

打开页面就可以看到效果了。

angularJS可以实现常常看到购物车中的升序降序效果

标签:hold   打开   span   ng-repeat   hal   app   http   控制器   编号   

原文地址:http://www.cnblogs.com/chw8/p/7067526.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!