动态设置搜索模式
我是angularjs的新手，所以要有耐心^我正在尝试angularjs。如何以动态方式设置搜索模式？我尝试过这段代码，但没有成功:(
<html>
<head>
<meta charset="utf-8">
<title>Binding</title>
</head>
<body>
<div data-ng-app="myApp">
<input type="text" data-ng-model="{{mysearch}}" />
<select data-ng-model="mysearch">
<option value="search.$">All</option>
<option value="search.name">Name</option>
<option value="search.email">Email</option>
</select>
<span>{{mysearch}}</span>
<div data-ng-controller="MyCtrl">
<table>
<tr data-ng-repeat="actor in rows.cast | filter:search">
<td>{{actor.name}}</td>
<td>{{actor.email}}</td>
</tr>
</table>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var myAppModule = angular.module('myApp',[]);
myAppModule.factory('Avengers',function(){
var Avengers = {};
Avengers.cast = [{name:'joe',email:'joe@mysite.com'},{name:'david',email:'david@mysite.com'},{name:'charles',email:'charles3@mysite.com'}]
return Avengers;
});
function MyCtrl($scope,Avengers){
$scope.rows = Avengers;
}
</script>
</body>
</html>回答 2
Stack Overflow用户
发布于 2013-08-11 00:55:31
我解决了这个问题:)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
</head>
<body>
<div ng-app="myApp">
<div ng-controller="AvengersCtrl">
<select ng-model="mysearch" ng-change="change()">
<option value="$">All</option>
<option value="name">Name</option>
<option value="character">Character</option>
</select>
<input type="text" ng-model="search[filter]">
<table>
<tr ng-repeat="actor in avengers.cast | filter:search">
<td>{{ actor.name }}</td>
<td>{{ actor.character }}</td>
</tr>
</table>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.factory('Avengers', function () {
var Avengers = {};
Avengers.cast = [
{name: 'Fabio',character: 'superman'},
{name: 'whisher',character: 'spiderman'}
];
return Avengers;
});
function AvengersCtrl($scope, Avengers) {
$scope.filter = "name";
$scope.search = {name:'', character:'', $:''};
$scope.avengers = Avengers;
$scope.change = function(){
$scope.filter = $scope.mysearch;
}
}
</script>
</body>
</html>非常感谢@lopisan angularjs: change filter options dynamically
Stack Overflow用户
发布于 2013-07-12 22:51:12
文档是这样写的：
http://docs.angularjs.org/api/ng.filter:filter
参数数组-{数组}-源数组。expression - {string|Object|function()} -用于从数组中选择项的谓词。可以是: string: Predicate之一，它使用表达式字符串的值产生子字符串匹配。将返回包含该字符串的所有字符串或数组中具有字符串属性的对象。谓词可以通过在字符串前加上！前缀来否定。
Object: pattern对象可用于过滤数组包含的对象的特定属性。例如，{ name : "M“，phone: "1”}谓词将返回属性名称包含“M”和属性phone包含“1”的项的数组。可以使用一个特殊的属性名$(如{$:"text"})来接受与对象的任何属性的匹配。这等同于上面描述的简单的子字符串与字符串的匹配。
函数:谓词函数可以用来编写任意的过滤器。对数组的每个元素都调用该函数。最终结果是谓词为其返回true的那些元素的数组。
您可能需要两个输入字段，一个用于姓名，另一个用于电子邮件，然后将一个对象传递给与数据模型、姓名和电子邮件中的字段相对应的过滤器。
您也可以编写自定义过滤器，它们实际上非常简单。
https://stackoverflow.com/questions/17617664
复制相似问题
腾讯云开发者
