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

Question

我已经想出了静态(硬编码)多列过滤; 在这里.

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

但是,我希望能够根据模型动态创建文本框过滤器(即任何列数).看起来它应该是这样的,但文本框什么都不做.

<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"}
    ];
}