首页 文章

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

提问于
浏览
1

我正在重复一个包含键/值对的数据模型 . 假设有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 回答

  • 3

    我怀疑你能用 default 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>
    

相关问题