angularJs的学习笔记（一）：angularJs的filter是根据value属性值来过滤的

浏览数：35 / 时间：2015年06月09日

最近在捣鼓angularJs，刚刚入门，教程里有一篇是关于filter的，效果如下所示，学过的都知道，最简单的一个了。

代码如下：

 1 <!doctype html>
 2 <html lang="en" ng-app="phonecatApp">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>Google Phone Gallery</title>
 6   <link rel="stylesheet" href="css/app.css">
 7   <link rel="stylesheet" href="css/bootstrap.css">
 8   <script src="lib/angular/angular.js"></script>
 9   <script src="js/controllers.js"></script>
10 </head>
11 <body ng-controller="PhoneListCtrl">
12 
13   <div class="container-fluid">
14     <div class="row-fluid">
15       <div class="span2">
16         <!--Sidebar content-->
17 
18         Search: <input ng-model="query">
19 
20       </div>
21       <div class="span10">
22         <!--Body content-->
23 
24         <ul class="phones">
25           <li ng-repeat="phone in phones | filter:query">
26             {{phone.name}}
27             <p>{{phone.snippet}}</p>
28           </li>
29         </ul>
30 
31       </div>
32     </div>
33   </div>
34 
35 </body>
36 </html>

js代码如下：

 1 ‘use strict‘;
 2 
 3 /* Controllers */
 4 
 5 var phonecatApp = angular.module(‘phonecatApp‘, []);
 6 
 7 phonecatApp.controller(‘PhoneListCtrl‘, function($scope) {
 8   $scope.phones = [
 9     {‘name‘: ‘Nexus S‘,
10      ‘snippet‘: ‘Fast just got faster with Nexus S.‘,
11      ‘age‘: 1},
12     {‘name‘: ‘Motorola XOOM? with Wi-Fi‘,
13      ‘snippet‘: ‘The Next, Next Generation tablet.‘,
14      ‘age‘: 2},
15     {‘name‘: ‘MOTOROLA XOOM?‘,
16      ‘snippet‘: ‘The Next, Next Generation tablet.‘,
17      ‘age‘: 3}
18   ];
19 
20 });

到这里还没有什么问题，顺着教程的思路往下走，下一篇是讲排序的，根据下拉列表的值来决定排序规则，效果图如下：

，

新代码：

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        Sort by:
        <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>

      </div>
      <div class="span10">
        <!--Body content-->

        <ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
          </li>
        </ul>

      </div>
    </div>
  </div>

</body>
</html>

js的代码：

‘use strict‘;

/* Controllers */

var phonecatApp = angular.module(‘phonecatApp‘, []);

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

  $scope.orderProp = ‘age‘;
});

（ps：具体什么意思就不解释了，重点不是这个），突发奇想，想着既然输入框能做filter来过滤，那下拉框也可以啊，开始想着把ng-repeat里的filter后面改为orderProp即可，其实就是这样，但是没奏效，因为不匹配，不是没有匹配下拉框显示的文本，而是匹配<option>的value属性。

总之，总结的就是，filter过滤的根据是model的value属性值。

（写完博客才发现，其实是很简单的东西，理所当然是value属性啊，但是写到这也不想删了，就当笔记吧，理解也加深了点。）

我在下拉列表里加了个文本是数字151....的，value是‘F’的option，选中之后就能过滤啦，嘿嘿，这样是为了明显的显示出效果来.可以自己试试。贴图：

代码：

1 <select ng-model="orderProp">
2           <option value="name">Alphabetical</option>
3           <option value="age">Newest</option>
4           <option value="F">151652222222</option>
5 </select>