Question

我已经找到了静态（硬编码）多列过滤; Here

<p><input type="text" ng-model="s1"></p>
<p><input type="text" ng-model="s2"></p>

<ul>
<li ng-repeat="x in names | filter:{name:s1} | filter:{country:s2} | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

但是，我希望能够根据模型动态创建文本框过滤器（即任何列的＃）。它似乎应该像this，但文本框什么都不做。

<div ng-repeat="n in names">
    <input type="text" ng-model="n.column" >
</div>

<ul>
  <li ng-repeat="x in names | filter:{name:name} | filter:{country:country} | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

我四处搜索，我发现很难相信这样的事情还没有完成[通常足以让我的搜索找到]。

感谢任何帮助。

Answer 1

<强> DEMO

<div ng-repeat="n in headers">
    <input type="text" ng-model="filters[n.column]" >
</div>

<ul>
  <li ng-repeat="x in names | filter:{name:filters.name} | filter:{country:filters.country} | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

控制器

function namesController($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];

    $scope.filters = {};

    $scope.headers = [
      {column: "name"},
      {column: "country"}
    ];
}

使用angularJS ng-repeat和ng-model进行动态多列过滤

1 个答案: