AngularJS应用实例-优快云博客

本文链接：https://blog.youkuaiyun.com/wupd2014/article/details/53712391

<!DOCTYPE html>
<html  ng-app>
<head>
    <title>angular</title>
    <meta charset="utf-8">
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script src="controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
    Search:<input  ng-model="query" />
    Sort by:
        <select ng-model="orderProp">
            <option value="name">Alphabetical</option>
            <option value="age">Newest</option>
        </select>
    <ul>
        <li ng-repeat="phone in phones|filter:query|orderBy:orderProp">
            {{phone.name}},{{phone.snippet}}
        </li>
    </ul>
</body>
</html>

数据绑定：用户在输入框中输入的数据名字称作query，会立刻作为列表迭代器（phone in phones | filter:query`）其过滤器的输入。

filter过滤器：filter函数使用query的值来创建一个只包含匹配query记录的新数组。

controllers.js

function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S.",
     "age": 0},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet.",
     "age": 1},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet.",
     "age": 2}
  ];

  $scope.orderProp = 'age';
}

Angularjs过滤器