angularJS可以實現常常看到購物車中的升序降序效果
阿新 • • 發佈：2017-06-23
back adding pla pac doc 升序降序 tle 下標 sco
{ "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可以實現常常看到購物車中的升序降序效果