ng-repeat通过键/值对进行过滤

时间:2015-01-22 22:19:17

标签: angularjs angularjs-ng-repeat ng-repeat angular-filters

我正在重复一个包含键/值对的数据模型。我们假设有30行,其中5行包含字符串' map'在关键。

我想过滤显示,只显示那些包含字符串' map'的对象。我知道这是一个过滤器,但是,我对文档没有太多运气 - 它没有涉及键/值的ng-repeat。

关于如何实现这一目标的任何想法?

<div class="row" 
    data-ng-repeat="(textKey, textValue) in publisher.update.file">
    <div class="small-3 columns">
        <label class="text-right inline" 
            for="file"
            id="textKey">
            {{ textKey }}
        </label>
    </div>
    <div class="text-align-left small-9 columns">
        <input name="textKey"
            ng-model="publisher.update.lang[textKey]">
    </div>
</div>

1 个答案:

答案 0 :(得分:3)

我怀疑你可以用默认 filter

来做到这一点

doc说:

  

数组中选择项目的子集,并将其作为新数组返回。

但是你可以创建自己的过滤器来实现这一目标。这是一个例子

var app = angular.module('app', []);


app.filter('Find', function() {
  return function(input, str) {
    var tmp = {};
    angular.forEach(input, function(val, key) {
      if (val.indexOf(str) !== -1) {
        tmp[key] = val;
      }
    });
    return tmp;
  };
})
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainCtrl">
    <div ng-init="test = {test1:'map',test2:'map2',test3:'test'}"></div>

    Search:
    <input ng-model="search" type="text">
    <br>
    <table id="searchTextResults">
      <tr>
        <th>key</th>
        <th>val</th>
      </tr>
      <tr ng-repeat="(key, val) in test| Find: search||'' ">
        <td>{{key}}</td>
        <td>{{val}}</td>
      </tr>
    </table>
    <hr>
  </div>
</div>