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

Answer 1

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

Answer 2

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

Answer 3

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>