angularjs: zmiana opcji filtrowania dynamicznie

Question

To, czego chcę, to przykład w dokumentacji, ale z unikalnym wprowadzeniem, które może odgrywać trzy role filtrowania według właściwości "dowolne", "nazwa" lub "telefon", zmiana rola jest wykonywana przez kliknięcie kotwicy. Oto kod gotowy http://jsfiddle.net/ubugnu/QuyCU/ Jak mogę dynamicznie aktualizować atrybut 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

Można zdefiniować ng-model jak: ng-model="search[filter]" zmieniać dynamicznie zmienna, do której należy zbindowanych (gdzie filter to kolejna zmienna $scope).

Zobacz skrzypce: http://jsfiddle.net/lopisan/vzQKk/1/

Trzeba dodać tę linię do kontrolera:

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

I zmienić wejście:

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

Answer 2

Oto jeden sposób - prawdopodobnie istnieją inni .

<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

Oto kolejny prosty podejście za pomocą przycisków radiowych

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