admin管理员组文章数量:1330676
I have figured out static (hard-coded) multi-column filtering; 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>
However, I want to be able to create the text box filters dynamically based on the model (ie. for any # of columns). It seems like it should be something like this, but the text boxes do nothing.
<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>
I've searched all around, and I find it hard to believe something like this hasn't been done [often enough to be found by my searching].
Any help is appreciated.
I have figured out static (hard-coded) multi-column filtering; 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>
However, I want to be able to create the text box filters dynamically based on the model (ie. for any # of columns). It seems like it should be something like this, but the text boxes do nothing.
<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>
I've searched all around, and I find it hard to believe something like this hasn't been done [often enough to be found by my searching].
Any help is appreciated.
Share Improve this question asked Aug 11, 2014 at 22:51 GuyGuy 1392 gold badges2 silver badges7 bronze badges1 Answer
Reset to default 5DEMO
<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>
Controller
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"}
];
}
本文标签: javascriptDynamic multicolumn filtering with angularJS ngrepeat and ngmodelStack Overflow
版权声明:本文标题:javascript - Dynamic multi-column filtering with angularJS ng-repeat and ng-model - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742242704a2438932.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论