设置搜索模式动态 [英] Set search mode dynamically
本文介绍了设置搜索模式动态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在angularjs新的所以要耐心等待^^
我玩弄angularjs。
我怎样才能dinamically设置搜索模式?
我试过这个code,没有运气:(
< HTML和GT;
< HEAD>
<间的charset =UTF-8>
<标题>装订< /标题>
< /头>
<身体GT;
< DIV数据-NG-应用=对myApp>
<输入类型=文本数据-NG-模式={{MYSEARCH}}/>
<选择数据-NG-模式=MYSEARCH>
<期权价值=搜索$>所有< /选项>
<期权价值=search.name>名称和LT; /选项>
<期权价值=search.email>电子邮件和LT; /选项>
< /选择>
<跨度> {{MYSEARCH}}< / SPAN>
< DIV数据-NG-控制器=MyCtrl>
<表>
< TR数据-NG-重复=男主角rows.cast |过滤器:搜索>
&所述; TD> {{actor.name}}&下; / TD>
&所述; TD> {{actor.email}}&下; / TD>
< / TR>
< /表>
< / DIV>
&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屋!
查看全文