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

Dynamic multi-column filtering with angularJS ng-repeat and ng-model

本文关键字：动态 过滤 ng-model angularJS ng-repeat 使用      更新时间：2023-09-26

我已经弄清楚静态(硬编码)多列过滤;这里。

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

我到处都找过了，我很难相信这样的事情没有发生过[经常被我的搜索发现]。

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"}
    ];
}
相关文章：