angularjs: Filteroptionen dynamisch ändern

Question

Was ich möchte ist so etwas wie this Beispiel in der Dokumentation, aber mit einem eindeutigen Eingang, der die drei Rollen der Filterung von "any", "Name" oder "Telefon" Eigenschaften, die Änderung von spielen kann Rolle wird durch einen Ankerklick ausgeführt. Hier ist der Code bereit http://jsfiddle.net/ubugnu/QuyCU/ Wie kann ich das ng-Modell-Attribut dynamisch aktualisieren?

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

Sie ng-model wie definieren: ng-model="search[filter]" dynamisch Variable, auf die ändern es binded werden soll (wo filter andere $scope Variable ist).

Siehe Geige: http://jsfiddle.net/lopisan/vzQKk/1/

Sie haben diese Zeile an den Controller hinzuzufügen:

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

Und Eingabe ändern:

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

Answer 2

Hier ist ein Ansatz - es wahrscheinlich andere .

<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

Hier ist ein weiterer einfacher Ansatz Radiobuttons

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