<!DOCTYPE html> <html ng-app="shoppingModule"> <head> <title></title> <script src="angular.min.js" type="text/javascript"></script> <script> var shoppingModule = angular.module("shoppingModule", []); //shoppingModule.factory("Items", function () { /var items = {}; //items.query = function () { //return [ //{ name: 'Jackey', age: 25 }, //{ name: 'Cassi', age: 34 }, //{ name: 'uuuuujC', age: 12 } //]; // }; //return items; //}); //过滤器 shoppingModule.filter("titleCase", function () { var titleCase = function (input) { return input.charAt(0).toUpperCase() + input.slice(1); }; return titleCase; }); shoppingModule.controller("shoppingController", function ($scope, $http) { //$scope.Items = Items.query(); $http.get('contact/phone.json').success(function (data) { $scope.Items = data; }); }); </script> </head> <body> <div ng-controller="shoppingController"> search:<input ng-model="query" /> <select ng-model="orderByy"> <option value="name">name</option> <option value="age">age</option> </select> <ul> <li ng-repeat="item in Items|filter:query | orderBy:orderByy"> {{item.name | titleCase}} {{item.age}} </li> </ul> </div> </body> </html>
json的格式为：
[
{
"name":"Jackey","phone":"13480230965","sex":"male","age":22
},
{
"name": "Cassi", "phone": "13480230965", "sex": "female", "age": 21
},
{
"name": "JC", "phone": "13480230965", "sex": "male", "age": 1
}
]
注意点是：
shoppingModule.controller("shoppingController", function ($scope, $http) {
$http由外部传入