{
"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>
打开页面就可以看到效果了。
时间： 2024-10-20 07:11:04