angularjs: изменить параметры фильтра динамически

Question

Я хочу что-то вроде this пример в документации, но с уникальным входом, который может воспроизводить три роли фильтрации по свойствам «любое», «имя» или «телефон», изменение роль выполняется щелчком якоря. Вот код готов http://jsfiddle.net/ubugnu/QuyCU/ Как обновить атрибут 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

Вы можете определить ng-model как: ng-model="search[filter]" динамически изменять какой переменной следует переплетены (где filter еще одна $scope переменная).

Смотрите скрипку: http://jsfiddle.net/lopisan/vzQKk/1/

Вы должны добавить эту строку в контроллер:

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

И изменить вход:

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

Answer 2

Вот один подход - Есть, вероятно, другие ,

<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

Вот еще один простой подход, используя радиокнопки

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