angularjs: change filter options dynamically

Question

What I want is something like this example in the documentation but with a unique input that can play the three roles of filtering by "any", "name" or "phone" properties, the change of role is done by an anchor click. Here is the code ready http://jsfiddle.net/ubugnu/QuyCU/ How can I update the ng-model attribute dynamically?

HTML

<div ng-app>
  <div ng-controller="MainCtrl">

      <label>Any</label> <input type="text" ng-model="search.$"> <br>
      <label>Name only</label> <input type="text" ng-model="search.name"><br>
      <label>Phone only</label> <input type="text" ng-model="search.phone"><br>

      <div style="background-color:#FAE8F1">
      <hr>

      <label>Filter</label> <input type="text" ng-model="search.$"> by {{filter}} <br>
      <ul>
      <li><a href="" ng-click="changeFilterTo('$')">Any</a></li>
      <li><a href="" ng-click="changeFilterTo('name')">By Name</a></li>
      <li><a href="" ng-click="changeFilterTo('phone')">By phone</a></li>
      </ul>

      <hr>
      </div>

      <table class="table">
        <tr><th>Name</th><th>Phone</th></tr>
        <tr ng-repeat="friend in friends | filter:search">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
        </tr>
      </table>
  </div>
</div>

JS

function MainCtrl($scope, $http) {
    $scope.friends = [{name:'John', phone:'555-1276'},
                      {name:'Mary', phone:'800-BIG-MARY'},
                      {name:'Mike', phone:'555-4321'},
                      {name:'Adam', phone:'555-5678'},
                      {name:'Julie', phone:'555-8765'}];
    $scope.filter = "$";
    $scope.changeFilterTo = function(pr) {
        $scope.filter = pr; 
    }
};

lopisan · Accepted Answer · 2013-06-26 12:32:14Z

20

You can define ng-model like: ng-model="search[filter]" to change dynamically to which variable it should be binded (where filter is another $scope variable).

See the fiddle: http://jsfiddle.net/lopisan/vzQKk/1/

You have to add this line to the controller:

$scope.search = {name:'', phone:'', $:''};

And change input:

<input type="text" ng-model="search[filter]">

edited Jun 26, 2013 at 12:32

answered Jun 26, 2013 at 12:24

lopisan

7,8303 gold badges39 silver badges45 bronze badges

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

4 Comments

S McCrohan Over a year ago

This doesn't quite work, in the fiddle...try searching for 'a' and clicking 'phone'. It appears to be searching on 'All' regardless of the link clicked. I think it only needs a small tweak or two to work, though.

lopisan Over a year ago

I think it works ok, but maybe in a little bit non-intuitive way (but it demonstrate the solution nicely) - when you click "Any|By Name|By phone", it just links bottom textbox to one of corresponding upper textboxes. So typing 'a' fills the 'a' to "Any" and clicking 'by phone' switches bottom textbox to "phone" so next typing add phone constraints leaving "any" constrain alone..

iPhoneDev Over a year ago

Is there any way to have filter by "name" and "Phone" ONLY

Pedro Hoehl Carvalho Over a year ago

Very clever solution!

S McCrohan · Accepted Answer · 2013-06-26 12:28:27Z

Here's one approach - there are probably others.

<div ng-app>
  <div ng-controller="MainCtrl">
      <div style="background-color:#FAE8F1">
      <hr>

      <label>Filter</label> <input type="text" ng-model="multi"> by {{filter}}         <br>
      <ul>
      <li><a href="" ng-click="changeFilterTo('$')">Any</a></li>
      <li><a href="" ng-click="changeFilterTo('name')">By Name</a></li>
      <li><a href="" ng-click="changeFilterTo('phone')">By phone</a></li>
      </ul>

      <hr>
      </div>

      <table class="table">
        <tr><th>Name</th><th>Phone</th></tr>
        <tr ng-repeat="friend in friends | filter:getFilter()">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
        </tr>
      </table>
  </div>
</div>

Javascript:

function MainCtrl($scope, $http) {
    $scope.friends = [{name:'John', phone:'555-1276'},
                      {name:'Mary', phone:'800-BIG-MARY'},
                      {name:'Mike', phone:'555-4321'},
                      {name:'Adam', phone:'555-5678'},
                      {name:'Julie', phone:'555-8765'}];
    $scope.filter = "$";
    $scope.multi = "";
    $scope.changeFilterTo = function(pr) {
        $scope.filter = pr; 
    }
    $scope.getFilter = function() {
        switch ($scope.filter) {
            case 'name':
                return {name: $scope.multi};
            case 'phone':
                return {phone: $scope.multi};
            default:
                return {$: $scope.multi}
        }
    }
};

Mangopop · Accepted Answer · 2016-05-17 13:58:24Z

1

Here's another simple approach using radio buttons

<input type="text" ng-model="search[filter]">

<label>filter by these</label>

<label>Any <input type="radio" ng-model="filter" ng-init="filter = '$'" value="$"></label>
<label>name<input type="radio" ng-model="filter" value="name"></label>
<label>phone<input type="radio" ng-model="filter" value="phone"></label>

answered May 17, 2016 at 13:58

Mangopop

3302 silver badges12 bronze badges

Collectives™ on Stack Overflow

angularjs: change filter options dynamically

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related