Angularjs过滤器

发布时间：2020-12-17 10:31:23 所属栏目：安全来源：网络整理

导读：!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: i

<!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?","age": 2}
  ];

  $scope.orderProp = 'age';
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!