angularjs: cambia dinamicamente le opzioni di filtro

Question

Quello che voglio è qualcosa come this esempio nella documentazione ma con un input univoco che può giocare i tre ruoli di filtraggio con proprietà "any", "name" o "phone", il cambio di il ruolo è fatto da un clic di ancoraggio. Ecco il codice pronto http://jsfiddle.net/ubugnu/QuyCU/ Come aggiornare dinamicamente l'attributo ng-model?

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

È possibile definire ng-model come: ng-model="search[filter]" per modificare dinamicamente la variabile su cui deve essere rilegato (dove filter è un'altra variabile $scope).

Vedere il violino: http://jsfiddle.net/lopisan/vzQKk/1/

È necessario aggiungere questa riga al controller:

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

E cambiare l'ingresso:

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

Answer 2

Ecco un approccio - ci sono probabilmente altri .

<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

Ecco un altro approccio semplice utilizzando i pulsanti di opzione

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