Question

前几天我正在玩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>

我的问题是：我可以在premade 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>

感谢您的回答！

Answer 1

没有。您的第一个示例使用过滤器 - 称为“过滤器”！ 过滤器可以构成Angular绑定表达式的一部分。它放在管道字符后面，并将“过滤器函数”应用于管道前面的表达式部分。某些过滤器还会在冒号右侧采用其他参数。名为“filter”的过滤器作用于数组（管道前的部分，在本例中为 phones ），通过由右侧参数确定的检查传递每个项目。结肠。在您的情况下，使用名为query的字符串变量，它返回一个数组，其中包含 phones 中包含查询字符串的任何项目。

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

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

Answer 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。

Answer 3

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

我尝试使用自定义指令实现。 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()));
        });
      });
    }
  };
});

Angular.js过滤预制的html元素

3 个答案: