1

前几天我在玩 angular.js，我发现了 angular.js 为我们提供的这个过滤器功能。

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

      Search: <input ng-model="query">

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

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

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

我的问题是：我可以在预制的 html 元素上使用 angular.js 过滤器，就像这样。

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

      Search: <input ng-model="query">

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

      <ul class="phones" ng-filter:query>
        <li>First element</li>
        <li>Second elementy/li>
        <li>Third element</li>
      </ul>

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

谢谢您的回答！

4

3 回答 3

2

不，您的第一个示例使用过滤器- 称为“过滤器”！过滤器可以构成 Angular 绑定表达式的一部分。它放置在管道字符之后，并将“过滤器功能”应用于管道之前的表达式部分。一些过滤器还采用冒号右侧的附加参数。称为“过滤器”的过滤器作用于一个数组（管道之前的部分，在本例中是电话），通过由冒号右侧的参数确定的检查来传递每个项目。在您的情况下，使用名为查询的字符串变量，它返回一个数组，其中包含来自手机的任何项目，这些项目包含查询中的字符串。

Angular 中过滤器的其他示例包括货​​币、日期、大写和 orderBy。它们都接受一个输入（例如一个字符串）返回另一个值（例如字符串的大写版本），在某些情况下还有其他配置参数（例如日期或货币格式，或排序依据的字段）。但它们仅适用于“数据模型”中具有某些值的输入，而不是直接适用于 DOM 节点的内容。

您的第二个示例尝试使用名为“ngFilter”的指令。指令是标准 HTML 语法的扩展，可以表示为连字符属性（在本例中）、数据属性（data-ng-filter）、命名空间属性（ng:filter）、css 类等。Angular 的默认值指令具有前缀“ng”。但是Angular 中没有像“ngFilter”这样的指令。您的示例可以正常加载，但添加此不存在的指令不会对 DOM 处理产生影响。

于 2012-10-22T11:52:35.713 回答
2

对于这种 DOM 操作/过滤，通常使用Angular 指令ngSwitch或ngShow / ngHide 。

<ul class="phones" ng-switch on="query">
<li ng-switch-when="Nexus S">First element</li>

上面会寻找一个完全匹配的东西（所以它不如@tosh 的指令好）。ng-switch 通常与选择下拉菜单一起使用，其中可能的值是固定/已知的。

ngShow/ngHide 可能更适合您尝试做的事情。内联表达式或 $scope 函数可用于确定是否显示元素：

<li ngShow="some expression using query">First element</li>
<li ngShow="myFilter()">First element</li>

function MyCtrl($scope) {
    $scope.myFilter = function() {
       if($scope.query ...) {  // could use RegExp() here like @tosh
          return true
       }
       return false
    }

以上不需要jQuery。

于 2012-10-22T16:29:37.353 回答
1

我不认为这是默认指令的一部分，但这是一项有趣的任务。

我尝试使用自定义指令来实现。 http://plnkr.co/edit/TOGbtq

app.directive('ngFilter', function() {
  return {
    link: function(scope, element, attr) {
      scope.$watch(attr.ngFilter, function(q){
        $(element).children().each(function(i,a){
          $(a).toggle((new RegExp(q)).test($(a).text()));
        });
      });
    }
  };
});
于 2012-10-22T11:50:14.257 回答