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