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

Question

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.

Darshan P · Accepted Answer · 2014-08-12 00:26:25Z

5

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>

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

answered Aug 12, 2014 at 0:26

Darshan P

2,24119 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Guy Over a year ago

Maybe you can answer this quickly before I post a new question: Is there a [good] way to do embedded bindings? eg. {{item.{{column}}}} which is in double nested ng-repeats ? Or something equivalent to this? I can't find anything anywhere.

Darshan P Over a year ago

I am not sure, never really done anything like that.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related