Question

我有这个ng-repeat，为了清楚起见，我在这里分三行：

ng-repeat="row in phs.phrasesView = 
           (phs.phrases | orderBy:phs.phrasesOrderBy[phs.phrasesOrderById]
           .key:phs.phrasesSortDirectionId == 1)">

在我的表单上，我有一个字段phs.keywordRange

有没有办法可以让它按照以下方式过滤返回的行：

当phs.keywordRange为null或空字符串时，显示所有行
当phs.keywordRange为A时，只显示row.keyword以A开头的行
当phs.keywordRange为ABC时，只显示row.keyword以ABC开头的行

Answer 1

制作您自己的过滤器，例如this fiddle。更改$ scope.keywordRange将相应地更新列表。

作为捷径：

.filter('keywordRange', function() {
   return function(value, keyword) {

   var out = [];

   if(!keyword) {
     return value;
   }

   for(var i = 0; i < value.length; i++) {
     if(value[i].startsWith(keyword)){
       out.push(value[i]);
     }
   }

   return out;
  };
});

function MyCtrl($scope) {
  $scope.keywordRange = 'ti';

  $scope.lines = [
    'rest1', 'rest2', 'tiago', 'pedro', 'america'
  ];
}

和html

<div ng-controller="MyCtrl">
   <div ng-repeat="line in lines | keywordRange:keywordRange">

     <p>{{line}}</p>
   </div>
</div>

如何动态限制ng-repeat中显示的数据？

1 个答案: