AngularJS学习笔记（3）

2016/09/28

8. 模板中的过滤器

这里说的过滤器，是用于对数据的格式化，或者筛选的函数。它们可以直接在模板中通过一种语法使用。对于常用功能来说，是很方便的一种机制。

多个过滤器之间可以直接连续使用。

8.1. 排序 orderBy

orderBy 是一个排序用的过滤器标签。它可以像 sort 函数那样支持一个排序函数，也可以简单地指定一个属性名进行操作：

<div ng-controller="TestCtrl">
  {{ data | orderBy: 'age' }} <br />
  {{ data | orderBy: '-age' }} <br />
  {{ data | orderBy: '-age' | limitTo: 2 }} <br />
  {{ data | orderBy: ['-age', 'name'] }} <br />
</div>

<script>
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  $scope.data = [
    {name: 'B', age: 4},  
    {name: 'A', age: 1},  
    {name: 'D', age: 3},  
    {name: 'C', age: 3},  
  ];
});
angular.bootstrap(document.documentElement, ['app']);
</script>

8.2. 过滤列表 filter

filter 是一个过滤内容的标签。

如果参数是一个字符串，则列表成员中的任意属性值中有这个字符串，即为满足条件（忽略大小写）：

<div ng-controller="TestCtrl">
  {{ data | filter: 'b' }} <br />
  {{ data | filter: '!B' }} <br />
</div>

<script>
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  $scope.data = [
    {name: 'B', age: 4},  
    {name: 'A', age: 1},  
    {name: 'D', age: 3},  
    {name: 'C', age: 3},  
  ];
});
angular.bootstrap(document.documentElement, ['app']);
</script>

可以使用对象，来指定属性名， $ 表示任意属性：

1
2
3

{{ data | filter: {name: 'A'} }} <br />
{{ data | filter: {$: '3'} }} <br />
{{ data | filter: {$: '!3'} }} <br />

自定义的过滤函数也支持：

<div ng-controller="TestCtrl">
  {{ data | filter: f }} <br />
</div>

<script>
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  $scope.data = [
    {name: 'B', age: 4},  
    {name: 'A', age: 1},  
    {name: 'D', age: 3},  
    {name: 'C', age: 3},  
  ];

  $scope.f = function(e){
    return e.age > 2;
  }
});
angular.bootstrap(document.documentElement, ['app']);
</script>

8.3. 其它

时间戳格式化 date ：

<div ng-controller="TestCtrl">
{{ a | date: 'yyyy-MM-dd HH:mm:ss' }}
</div>

<script>
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  $scope.a = ((new Date().valueOf()));
});
angular.bootstrap(document.documentElement, ['app']);
</script>

列表截取 limitTo ，支持正负数：

1 2	{{ [1,2,3,4,5] \| limitTo: 2 }} {{ [1,2,3,4,5] \| limitTo: -3 }}

大小写 lowercase ， uppercase ：

1 2	{{ 'abc' \| uppercase }} {{ 'Abc' \| lowercase }}

8.4. 例子：表头排序

<div ng-controller="TestCtrl">
  <table>
    <tr>
      <th ng-click="f='name'; rev=!rev">名字</th>
      <th ng-click="f='age'; rev=!rev">年龄</th>
    </tr>

    <tr ng-repeat="o in data | orderBy: f : rev">
      <td>{{ o.name }}</td>
      <td>{{ o.age }}</td>
    </tr>
  </table>
</div>

<script>
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  $scope.data = [
    {name: 'B', age: 4},  
    {name: 'A', age: 1},  
    {name: 'D', age: 3},  
    {name: 'C', age: 3},  
  ];
});
angular.bootstrap(document.documentElement, ['app']);
</script>

8.5. 例子：搜索

<div ng-controller="TestCtrl" ng-init="s=data[0].name; q=''">
  <div>
    <span>查找：</span> <input type="text" ng-model="q" />
  </div>
  <select ng-multiple="true" ng-model="s"
          ng-options="o.name as o.name + '(' + o.age + ')' for o in data
                            | filter: {name: q} | orderBy: ['age', 'name'] ">
  </select>
</div>

<script>
var TestCtrl = function($scope){
  $scope.data = [
    {name: 'B', age: 4},  
    {name: 'A', age: 1},  
    {name: 'D', age: 3},  
    {name: 'C', age: 3},  
  ];
}

angular.bootstrap(document.documentElement);
</script>

9. 锚点路由

准确地说，这应该叫对 hashchange 事件的处理吧。

就是指 URL 中的锚点部分发生变化时，触发预先定义的业务逻辑。比如现在是 /test#/x ，锚点部分的值为 # 后的 /x ，它就对应了一组处理逻辑。当这部分变化时，比如变成了 /test#/t ，这时页面是不会刷新的，但是它可以触发另外一组处理逻辑，来做一些事，也可以让页面发生变化。

这种机制对于复杂的单页面来说，无疑是一种强大的业务切分手段。就算不是复杂的单页面应用，在普通页面上善用这种机制，也可以让业务逻辑更容易控制。

ng 提供了完善的锚点路由功能，虽然目前我觉得相当重要的一个功能还有待完善（后面会说），但目前这功能的几部分内容，已经让我思考了很多种可能性了。

ng 中的锚点路由功能是由几部分 API 共同完成的一整套方案。这其中包括了路由定义，参数定义，业务处理等。

9.1. 路由定义

要使用锚点路由功能，需要在先定义它。目前，对于定义的方法，我个人只发现在“初始化”阶段可以通过 $routeProvider 这个服务来定义。

在定义一个 app 时可以定义锚点路由：

<html ng-app="ngView">
  ... ...

<div ng-view></div>

<script>
angular.module('ngView', [],
  function($routeProvider){
    $routeProvider.when('/test',
      {
        template: 'test',
      }
    );
  }
);
</script>

首先看 ng-view 这个 directive ，它是一个标记“锚点作用区”的指令。目前页面上只能有一个“锚点作用区”。有人已经提了，“多个可命名”的锚点作用区的代码到官方，但是目前官方还没有接受合并，我觉得多个作用区这个功能是很重要的，希望下个发布版中能有。

锚点作用区的功能，就是让锚点路由定义时的那些模板， controller 等，它们产生的 HTML 代码放在作用区内。

比如上面的代码，当你刚打开页面时，页面是空白的。你手动访问 /#/test 就可以看到页面上出现了 ‘test’ 的字样。

在 angular.bootstrap() 时也可以定义：

angular.bootstrap(document.documentElement, [
  function($routeProvider){
    $routeProvider.when('/test',
      {
        template: 'test'
      }
    );
  }
]);

9.2. 参数定义

在作路由定义时，可以匹配一个规则，规则中可以定义路径中的某些部分作为参数之用，然后使用 $routeParams 服务获取到指定参数。比如 /#/book/test 中， test 作为参数传入到 controller 中：

<div ng-view></div>

<script>
angular.module('ngView', [],
    function($routeProvider){
        $routeProvider.when('/book/:title', {
            template: '{{ title }}',
            controller: function($scope, $routeParams){
                $scope.title = $routeParams.title;
            }
        });
    }
);
</script>

访问： /#/book/test

不需要预定义模式，也可以像普通 GET 请求那样获取到相关参数：

angular.module('ngView', [],
  function($routeProvider){
    $routeProvider.when('/book',
      {
        template: '{{ title }}',
        controller: function($scope, $routeParams){
          $scope.title = $routeParams.title;
        }
      }
    );
  }
);

访问： /#/book?title=test

9.3. 业务处理

简单来说，当一个锚点路由定义被匹配时，会根据模板生成一个 $scope ，同时相应的一个 controller 就会被触发。最后模板的结果会被填充到 ng-view 中去。

从上面的例子中可以看到，最直接的方式，我们可以在模板中双向绑定数据，而数据的来源，在 controller 中控制。在 controller 中，又可以使用到像 $scope ， $routeParams 这些服务。

这里先提一下另外一种与锚点路由相关的服务， $route 。这个服务里锚点路由在定义时，及匹配过程中的信息。比如我们搞怪一下：

angular.module('ngView', [],
  function($routeProvider){
    $routeProvider.when('/a', {
        template: '{{ title }}',
        controller: function($scope){
          $scope.title = 'a';
        }
      }
    );

    $routeProvider.when('/b', {
        template: '{{ title }}',
        controller: function($scope, $route){
          console.log($route);
          $route.routes['/a'].controller($scope);
        }
      }
    );
  }
);

回到锚点定义的业务处理中来。我们可以以字符串形式写模板，也可以直接引用外部文件作为模板：

angular.module('ngView', [],
  function($routeProvider){
    $routeProvider.when('/test', {
        templateUrl: 'tpl.html',
        controller: function($scope){
          $scope.title = 'a';
        }
      }
    );
  }
);

tpl.html 中的内容是：

1	{{ title }}

这样的话，模板可以预定义，也可以很复杂了。

现在暂时忘了模板吧，因为前面提到的，当前 ng-view 不能有多个的限制，模板的渲染机制局限性还是很大的。不过，反正会触发一个 controller ，那么在函数当中我们可以尽量地干自己喜欢的事：

angular.module('ngView', [],
  function($routeProvider){
    $routeProvider.when('/test', {
        template: '{{}}',
        controller: function(){
          $('div').first().html('<b>OK</b>');
        }
      }
    );
  }
);

那个空的 template 不能省，否则 controller 不会被触发。

点击继续阅读 AngularJS学习笔记（4）

原文链接: https://www.zouyesheng.com/angular.html

关注 web翎云阁，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！