AngularJS：动态更改筛选器选项

Question

我想要的是像文档中这个例子，但是需要一个独特的输入框，可以扮演“任意”，“姓名”或“电话”属性过滤的三种角色，通过单击锚点来更改角色。 这里有准备好的代码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; 
    }
};

- ubugnu

Answer 1

你可以这样定义ng-model：ng-model="search[filter]"，动态改变它应该绑定到哪个变量（其中filter是另一个$scope变量）。

请参见fiddle： http://jsfiddle.net/lopisan/vzQKk/1/

你需要在控制器中添加这一行：

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

并更改输入：

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

- lopisan

---

这个在fiddle上似乎不太起作用...尝试搜索“a”并点击“phone”。它似乎无论点击哪个链接都在搜索“全部”。我认为只需要进行一些小的调整就可以使其正常工作。 - S McCrohan

我认为它运行良好，但可能有点不直观（但是它演示了解决方案） - 当您单击“任意|按名称|按电话”时，它只是将底部文本框链接到相应的上部文本框之一。因此，键入'a'会将'a'填充到“任意”中，并单击'按电话'会将底部文本框切换到“电话”，因此下一个键入将添加电话限制，保留“任意”限制不变... - lopisan

有没有办法只按“姓名”和“电话”进行筛选？ - iPhoneDev

非常聪明的解决方案！ - Pedro Hoehl Carvalho

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

- S McCrohan

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>

- Mangopop