网站首页  汉语字词  英语词汇  考试资料  写作素材

请输入您要查询的考试资料：

　

标签的border 样式在浏览器中显示不出来的解决方法
  • 剖析标注HTML元素时class比id所具有的优势
    • 标题 Angularjs中使用Filters详解
    分类 范文、应用文-IT技术专栏-网络编程
    内容
        本文给大家总结了下在Angularjs的模板、控制器、或者服务中使用Filters的方法，有需要的小伙伴可以参考下
        Filter作用就是接收一个输入，通过某个规则进行处理，然后给用户返回处理后的结果。Filter可以用在模板、控制器、或者服务，同时也会很容易自定义一个Filter过滤器。
        在模板中使用Filter
        Filter可以用于在视图模板中使用一下语法表达式：
        {{ expression | filter }}
        例如：格式{{ 12 | currency }}是使用currency的filter用法，让数字12过滤为货币形式，结果是$12.00。
        Filter可以应用到另一个过滤的结果中。这就是所谓的“chaining”，使用语法如下：
        {{ expression | filter1 | filter2 | ... }}
        Filter中可能需要参数。语法为：
        {{ expression | filter:argument1:argument2:... }}
        例如：格式{{ 1234 | number:2 }}是使用number的filter用法，将数字1234过滤为有两位小数点的数字，结果为：1,234.00 。
        在controller、services、directives中使用filter
         你可以在controller、services、directives中使用filter。
        为此，你需要将依赖项名称注入到你的controller/service/directive中：filter；例如：一个过滤器是number，你就需要通过使用依赖注入numberFilter。注入的参数是一个函数，该函数将值作为第一个参数，然后用第二个参数来筛选参数。
        下面的例子使用了叫做filter的Filter过滤器。这个filter可以在sub arrays的基础上减少arrays。也可以应用在视图模板的标记，就像：{{ctrl.array|filter:'a'}}，这将为‘a'做一个全文搜索。然而，在视图模板中使用filter将会重新对每一个filter过滤，如果数组比较大的会是加载多次的。
        因此下面的例子直接调用在控制器中的filter。通过这个，控制器可以在需要是调用filter（例如：当后端数据加载时或者filter的表达式改变时）。
        index.html: 
        <div ng-controller="FilterController as ctrl">
         <div>
          All entries:
          <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
         </div>
         <div>
          Entries that contain an "a":
          <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
         </div>
        </div>
        script.js:
        angular.module('FilterInControllerModule', []).
        controller('FilterController', ['filterFilter', function(filterFilter) {
         this.array = [
          {name: 'Tobias'},
          {name: 'Jeff'},
          {name: 'Brian'},
          {name: 'Igor'},
          {name: 'James'},
          {name: 'Brad'}
         ];
         this.filteredArray = filterFilter(this.array, 'a');
        }]);
        结果为：
        All entries: Tobias Jeff Brian Igor James Brad
        Entries that contain an "a": Tobias Brian James Brad
        创建自定义filters：
        编写自己的filter是非常简单的：只需要在你的模块中注册一个新的filter factory函数。在内部，这里用了filterProvider。这个factory函数应该返回一个新的filter函数并且将输入值作为第一个参数。任何过滤器参数都会作为附加参数传递到过滤器函数中。
        这个过滤器函数应该是一个单纯的函数。这意味着它应该stateless 和 idempotent。当输入的函数变化时，angular依赖这些属性并且执行filter。
        注意：filter的名称必须是有效的angular表达式标识符。例如uppercase或者orderBy。名字是不允许有特殊的字符，如连字符和点是不允许的。如果你希望你的过滤器有名称空间，那么你可以使用大写（myappSubsectionFilterx）或者下划线（myapp_subsection_filterx）。
        下面的示例filter是反写一个字符串。另外，它可以再加一个条件使字符串大写。
        index.html
        <div ng-controller="MyController">
         <input ng-model="greeting" type="text"><br>
         No filter: {{greeting}}<br>
         Reverse: {{greeting|reverse}}<br>
         Reverse + uppercase: {{greeting|reverse:true}}<br>
         Reverse, filtered in controller: {{filteredGreeting}}<br>
        </div>
        script.js
        angular.module('myReverseFilterApp', [])
        .filter('reverse', function() {
         return function(input, uppercase) {
          input = input || '';
          var out = "";
          for (var i = 0; i < input.length; i++) {
           out = input.charAt(i) + out;
          }
          // conditional based on optional argument
          if (uppercase) {
           out = out.toUpperCase();
          }
          return out;
         };
        })
        .controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
         $scope.greeting = 'hello';
         $scope.filteredGreeting = reverseFilter($scope.greeting);
        }]);
        结果为：
        No filter: hello
        Reverse: olleh
        Reverse + uppercase: OLLEH
        Reverse, filtered in controller: olleh
        有状态的filters(Stateful filters)
        强烈建议写有状态的filters，因为这些不能用angular进行优化，这往往会导致性能问题。许多有状态的filters转换成无状态的filters仅仅通过揭露隐藏的状态作为model，并且将其转化为一个filter参数。
        然而，如果你需要写一个有状态的filters，你必须将filter标记为$stateful，这也就意味着它将在每一个$digest周期内执行一次或多次。
        index,html
        <div ng-controller="MyController">
         Input: <input ng-model="greeting" type="text"><br>
         Decoration: <input ng-model="decoration.symbol" type="text"><br>
         No filter: {{greeting}}<br>
         Decorated: {{greeting | decorate}}<br>
        </div>
        script.js:
        angular.module('myStatefulFilterApp', [])
        .filter('decorate', ['decoration', function(decoration) {
         function decorateFilter(input) {
          return decoration.symbol + input + decoration.symbol;
         }
         decorateFilter.$stateful = true;
         return decorateFilter;
        }])
        .controller('MyController', ['$scope', 'decoration', function($scope, decoration) {
         $scope.greeting = 'hello';
         $scope.decoration = decoration;
        }])
        .value('decoration', {symbol: '*'});
        结果为：
        No filter: hello
        Decorated: *hello*
        下次会写一篇angularjs中filter的常用用法。
    随便看

    　

    客官网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

    　

    Copyright © 2002-2024 cumcu.com All Rights Reserved
    更新时间：2026/5/14 6:03:52