angularjs:动态更改过滤器选项 [英] angularjs: change filter options dynamically

问题描述

我想要的是文档中的 this 示例，但具有可以播放的唯一输入通过any"、name"或phone"属性过滤三个角色，角色的改变是通过一个锚点点击来完成的.这是准备好的代码 http://jsfiddle.net/ubugnu/QuyCU/ 如何动态更新 ng-model 属性?

HTML

<div ng-controller="MainCtrl"><label>任何</label><input type="text" ng-model="search.$"><br><label>仅姓名</label><input type="text" ng-model="search.name"><br><label>仅限手机</label><input type="text" ng-model="search.phone"><br><div style="background-color:#FAE8F1"><小时><label>过滤器</label><input type="text" ng-model="search.$">来自 {{filter}} 
<ul><li><a href="" ng-click="changeFilterTo('$')">任何</a></li><li><a href="" ng-click="changeFilterTo('name')">按名称</a></li><li><a href="" ng-click="changeFilterTo('phone')">通过电话</a></li><小时>
<table class="table"><tr><th>姓名</th><th>电话</th></tr><tr ng-repeat="朋友中的朋友 | filter:search"><td>{{friend.name}}</td><td>{{friend.phone}}</td></tr>

JS

function MainCtrl($scope, $http) {$scope.friends = [{name:'John', phone:'555-1276'},{姓名:'玛丽'，电话:'800-BIG-MARY'}，{姓名:'迈克'，电话:'555-4321'}，{姓名:'亚当'，电话:'555-5678'}，{姓名:'朱莉'，电话:'555-8765'}];$scope.filter = "$";$scope.changeFilterTo = function(pr) {$scope.filter = pr;}};

解决方案

你可以定义 ng-model 像:ng-model="search[filter]" 到动态更改它应该绑定到哪个变量(其中 filter 是另一个 $scope 变量).

看小提琴:http://jsfiddle.net/lopisan/vzQKk/1/

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

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

并更改输入:

What I want is something like this example in the documentation but with a unique input that can play the three roles of filtering by "any", "name" or "phone" properties, the change of role is done by an anchor click. Here is the code ready http://jsfiddle.net/ubugnu/QuyCU/ How can I update the ng-model attribute dynamically?

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

解决方案

You can define ng-model like: ng-model="search[filter]" to change dynamically to which variable it should be binded (where filter is another $scope variable).

See the fiddle: http://jsfiddle.net/lopisan/vzQKk/1/

You have to add this line to the controller:

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

And change input:

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

这篇关于angularjs:动态更改过滤器选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！