我想要的是文档中的this示例,但有一个独特的输入,可以扮演“any”,“name”或“phone”属性过滤的三个角色,角色的变化是通过锚点击完成。 这是准备好的代码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;
}
};
答案 0 :(得分:19)
您可以将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]">
答案 1 :(得分:8)
这是一种方法 - 可能还有其他方法。
<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}
}
}
};
答案 2 :(得分:1)
这是使用单选按钮的另一种简单方法
<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>