Javascript angularjs：动态更改过滤器选项

我想要的是与文档中的示例类似的东西，但是有一个独特的输入，可以通过“any”、“name”或“phone”属性扮演过滤的三个角色，角色的更改是通过单击锚来完成的。 下面是代码，我如何动态更新ng模型属性

HTML

---

您可以定义

ng model

如下：

ng model=“search[filter]”

动态更改它应该绑定到哪个变量（其中

filter

是另一个

$scope

变量）

看小提琴：

您必须将此行添加到控制器：

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

和更改输入：

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

---

这里有一种方法——可能还有其他方法

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

---

下面是另一个使用单选按钮的简单方法

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

通过这些过滤
任何
名称
电话

这不太管用，在小提琴中…尝试搜索“a”并单击“电话”。无论单击的链接是什么，它似乎都在“全部”上搜索。不过，我认为它只需要一两个小小的调整就可以工作。我认为它工作正常，但可能有点不直观（但它很好地演示了解决方案）——当你单击“Any | By Name | By phone”时，它只会将底部文本框链接到相应的上部文本框之一。因此，键入“a”将“a”填充到“Any”，单击“by phone”将底部文本框切换到“phone”，因此下一次键入时添加phone约束，只保留“Any”约束。有没有办法只按“name”和“phone”进行筛选非常聪明的解决方案！

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

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

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