javascript - angularjs:动态更改过滤器选项

Question

我想要的是类似 this 的东西文档中的示例，但具有可以通过“任何”、“名称”或“电话”属性进行过滤的三个 Angular 色的唯一输入， Angular 色的更改是通过 anchor 单击完成的。这是准备好的代码 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]" 以动态更改它应该绑定(bind)的变量(其中 filter 是另一个 $scope 变量)。

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

您必须将此行添加到 Controller :

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

并更改输入:

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