2705人阅读
前两天研究了一下angularjs，不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。
写了个搜索下拉框的demo，注释在里边都写了，就不再这罗嗦了。
1普通方式实现
&!DOCTYPE html&
&head lang=&zh_CN&&
&meta charset=&utf-8&&
&script src=&/libs/angular.js/1.4.6/angular.min.js& type=&text/javascript&&&/script&
&link href=&/bootstrap/3.0.3/css/bootstrap.min.css& rel=&stylesheet&&
&script src=&/jquery/2.0.0/jquery.min.js&&&/script&
&script src=&/bootstrap/3.0.3/js/bootstrap.min.js&&&/script&
&div ng-app=&myApp& ng-controller=&myCtrl&&
&input type = 'test' ng-change=&changeKeyValue(searchField)& ng-model=&searchField& style = 'display:width:200px' ng-click = 'hidden=!hidden' value=&{{searchField}}&/&&/input&
ng-hide=&hidden&&
&select style = 'width:200px' ng-change=&change(x)& ng-model=&x& multiple&
&option ng-repeat=&data in datas& &{{data}}&/option&
&p&&h1&angular输入选择框&/h1&&/p&
&p&&h2&逻辑实现步骤&/h2&&/p&
&p&1文本框做输入，并监控器change事件，在change事件中获取输入值，获取的输入值与选择框中的各个下拉项进行比较&/p&
&p&2如果包含则只显示包含的部分，不包含则显示全部&/p&
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.datas = [&key4&,&xyz&,&key3&,&xxxx&,&key2&,&value2&,&key1&,&value1&]; //下拉框选项
$scope.tempdatas = $scope. //下拉框选项副本
$scope.hidden=//选择框是否隐藏
$scope.searchField='';//文本框数据
//将下拉选的数据值赋值给文本框
$scope.change=function(x){
$scope.searchField=x;
$scope.hidden=
//获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换
$scope.changeKeyValue=function(v){
var newDate=[];
//临时下拉选副本
//如果包含就添加
angular.forEach($scope.datas ,function(data,index,array){
if(data.indexOf(v)&=0){
newDate.unshift(data);
//用下拉选副本替换原来的数据
$scope.datas=newD
//下拉选展示
$scope.hidden=
//如果不包含或者输入的是空字符串则用初始变量副本做替换
if($scope.datas.length==0 || ''==v){
$scope.datas=$scope.
console.log($scope.datas);
指令方式实现
&!DOCTYPE html&
&head lang=&zh_CN&&
&meta charset=&utf-8&&
&script src=&/libs/angular.js/1.4.6/angular.min.js& type=&text/javascript&&&/script&
&link href=&/bootstrap/3.0.3/css/bootstrap.min.css& rel=&stylesheet&&
&script src=&/jquery/2.0.0/jquery.min.js&&&/script&
&script src=&/bootstrap/3.0.3/js/bootstrap.min.js&&&/script&
&div ng-app=&myApp& ng-controller=&myCtrl&&
&select-search datas=&datas&&&/select-search&
&p&&h1&angular输入选择框 自定义指令方式&/h1&&/p&
&p&&h2&逻辑实现步骤&/h2&&/p&
&p&1文本框做输入，并监控器change事件，在change事件中获取输入值，获取的输入值与选择框中的各个下拉项进行比较&/p&
&p&2如果包含则只显示包含的部分，不包含则显示全部&/p&
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.datas = [&key4&,&xyz&,&key3&,&xxxx&,&key2&,&value2&,&key1&,&value1&]; //下拉框选项
app.directive('selectSearch', function($compile) {
restrict: 'AE', //attribute or element
datas: '=',
//bindAttr: '='
'&input type = &test& ng-change=&changeKeyValue(searchField)& ng-model=&searchField& style = &display:width:200px& '+
'ng-click = &hidden=!hidden& value=&{{searchField}}&/&&/input&'+
ng-hide=&hidden&&'+
' &select style = &width:200px& ng-change=&change(x)& ng-model=&x& multiple&'+
&option ng-repeat=&data in datas& &{{data}}&/option&'+
' &/select&'+
'&/div&',
replace: true,
link: function($scope, elem, attr, ctrl) {
$scope.tempdatas = $scope. //下拉框选项副本
$scope.hidden=//选择框是否隐藏
$scope.searchField='';//文本框数据
//将下拉选的数据值赋值给文本框
$scope.change=function(x){
$scope.searchField=x;
$scope.hidden=
//获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换
$scope.changeKeyValue=function(v){
var newDate=[];
//临时下拉选副本
//如果包含就添加
angular.forEach($scope.datas ,function(data,index,array){
if(data.indexOf(v)&=0){
newDate.unshift(data);
//用下拉选副本替换原来的数据
$scope.datas=newD
//下拉选展示
$scope.hidden=
//如果不包含或者输入的是空字符串则用初始变量副本做替换
if($scope.datas.length==0 || ''==v){
$scope.datas=$scope.
console.log($scope.datas);
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：283672次
积分：2235
积分：2235
排名：第16862名
原创：86篇
评论：89条
(2)(1)(2)(1)(1)(1)(2)(2)(2)(1)(1)(5)(5)(1)(1)(1)(2)(1)(1)(4)(6)(5)(1)(4)(4)(14)(12)(3)求助，用angularJs实现下图功能? - 知乎82被浏览2837分享邀请回答2413 条评论分享收藏感谢收起5添加评论分享收藏感谢收起查看更多回答1 个回答被折叠（）问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
假设我有两个控制器，这两个控制器是兄弟关系ListController ==& 列表控制器SearchController ==& 搜索控制器
页面一上来就在列表控制器中 请求数据成功后挂载到 $scope.data 然后在列表视图中应用。
but 我现在要搜索。
搜索控制器中有方法。输入文字点击确认，获取服务端返回的数据。
ok 我现在成功获取到数据了，我怎么把数据应用到 列表控制器 中 来渲染列表视图？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以用angularjs的广播，关键代码如下ListController
$scope.$on('SearchController.onSearch',function(e,data){
console.log(data);
SearchController
//搜索方法请根据实例情况处理 ，这里只进行获得结果之后的处理
$scope.search = function(){
var data = [];//搜索到的数据，如果是异步拿到的，请把以后的代码放到回调中
$scope.$emit('SearchController.onSearch',data);
$rootScope顶级控制器处理
$scope.$on('SearchController.onSearch',function(e,data){
$scope.$broadcast('SearchController.onSearch',data)
就可以了。核心是利用了广播
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
写个service呀，用来保存全局数据。进入列表页面的时候，先判断下这个全局数据对象是否有数据，没有数据直接显示原来的数据，有数据表示搜索过了，就显示搜索数据或者其他你喜欢的显示方式。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
点击了搜索，当然是重新请求数据了，直接重新给你的$scope.data= 赋值就ok
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：