设置搜索模式动态 [英] Set search mode dynamically
本文介绍了设置搜索模式动态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在angularjs新的所以要耐心等待^^
我玩弄angularjs。
我怎样才能dinamically设置搜索模式？
我试过这个code，没有运气：（
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;装订＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV数据-NG-应用=对myApp＆GT;
＆LT;输入类型=文本数据-NG-模式={{MYSEARCH}}/＆GT;
＆LT;选择数据-NG-模式=MYSEARCH＆GT;
＆LT;期权价值=搜索$＆GT;所有＆LT; /选项＆GT;
＆LT;期权价值=search.name＆GT;名称和LT; /选项＆GT;
＆LT;期权价值=search.email＆GT;电子邮件和LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT;跨度＆GT; {{MYSEARCH}}＆LT; / SPAN＆GT;
＆LT; DIV数据-NG-控制器=MyCtrl＆GT;
＆LT;表＆gt;
＆LT; TR数据-NG-重复=男主角rows.cast |过滤器：搜索＆GT;
＆所述; TD＆GT; {{actor.name}}＆下; / TD＆GT;
＆所述; TD＆GT; {{actor.email}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js\"></script>
＆LT;脚本＆GT;
VAR myAppModule = angular.module（'对myApp'，[]）;
myAppModule.factory（'复仇者'，函数（）{
VAR复仇者= {};
Avengers.cast = [{name:'joe',email:'joe@mysite.com'},{name:'david',email:'david@mysite.com'},{name:'charles',email:'charles3@mysite.com'}]
返回复仇者;
}）;
功能MyCtrl（$范围，复仇者）{
$ scope.rows =复仇者;
} ＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
我的工作吧：）
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT; AngularJS教程＆LT; /标题＆GT;
＆LT;链接rel =stylesheet属性HREF =// cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css\">
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG-应用=对myApp＆GT;
＆LT; DIV NG控制器=AvengersCtrl＆GT;
＆LT;选择NG模型=MYSEARCHNG变化=更改（）＆GT;
＆LT;期权价值=$＆GT;所有＆LT; /选项＆GT;
＆LT;期权价值=名与GT;名称和LT; /选项＆GT;
＆LT;期权价值=字符＆GT;性格＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT;输入类型=文本NG模型=搜索[滤镜]＆GT;
＆LT;表＆gt;
＆LT; TR NG重复=男主角avengers.cast |过滤器：搜索＆GT;
＆所述; TD＆GT; {{actor.name}}＆下; / TD＆GT;
＆所述; TD＆GT; {{actor.character}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js\"></script>
＆LT;脚本＆GT;
VAR对myApp = angular.module（'对myApp'，[]）;
myApp.factory（'复仇者'，函数（）{
VAR复仇者= {};
Avengers.cast = [
{名称：'法比奥'，字：超人}，
{名称：'whisher'，性格：'蜘蛛侠'}
];
返回复仇者;
}）;
功能AvengersCtrl（$范围，复仇者）{
$ scope.filter =名;
$ scope.search = {名称：''，字：''，$：''};
$ scope.avengers =复仇者;
$ scope.change =功能（）{
$ scope.filter = $ scope.mysearch;
}
}
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
非常感谢@lopisan <一个href=\"http://stackoverflow.com/questions/17319645/angularjs-change-filter-options-dynamically\">angularjs:更换过滤器选项动态
I'm new at angularjs so be patient ^^ I'm playing around with angularjs. How can I set the search mode dinamically ? I've tried with this code with no luck :(
<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>
解决方案
I worked it out :)
<!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>
many thanks to @lopisan angularjs: change filter options dynamically
这篇关于设置搜索模式动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
