Angularjs中select 的ng-repeat 和 ng-options 用法和获取选取值

转载 于 2017-06-22 17:18:47 发布 · 5.1k 阅读 · 1

本文介绍如何使用AngularJS的ng-repeat与ng-options指令来实现下拉菜单的搜索功能。通过具体的HTML与JS代码示例，展示了如何绑定数据、处理选项变化及获取选中值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

http://blog.csdn.net/manson_zh/article/details/72520604

AngularJS模块化开发中，遇到几次下拉菜单实现搜索功能的案例，现整理一下select中ng-repeat 和ng-options的用法和获取值的方法

一，ng-repeat

1,HTML

[html] view plain copy
  1. <select ng-model="selectedItems" ng-change="chenge()">  
  2. <option ng-repeat="x in items" value="{{x.id}}">{{x.name}}</option>  
  3. </select>  
  4.   
  5. <h1>你选择的是: {{selectedItems}}</h1>  

2,js

[javascript] view plain copy
  1. app.controller('myCtrl', function($scope) {  
  2.    $scope.items = [  
  3.         {name: "aaaa", id : "1"},  
  4.         {name : "bbbb", id : "2"},  
  5.         {name : "ccc", id : "3"}  
  6.     ];  
  7.   $scope.change = function(){  
  8.     //获取被选中的值  
  9.     var chengeitem = $scope.selectedItem;  
  10.     //js代码实现option值变化后的查询等操作      
  11.   }  
  12. });  
二，ng-options

1,HTML

[html] view plain copy
  1. <select ng-model="selectedItems" ng-options="x.name for x in items">  
  2. </select>  
  3. <h1>name: {{selectedItems.name}}</h1>  
  4. <h1>id: {{selectedItems.id}}</h1>  

2,JS

[javascript] view plain copy
  1. app.controller('myCtrl', function($scope) {  
  2.    $scope.items = [  
  3.         {name: "aaaa", id : "1"},  
  4.         {name : "bbbb", id : "2"},  
  5.         {name : "ccc", id : "3"}  
  6.     ];  
  7.   $scope.change = function(){  
  8.     //获取被选中的值  
  9.     var chengeitem = $scope.selectedItem;  
  10.     //js代码实现option值变化后的查询等操作      
  11.   }  
  12. });  


option值的变化正是实现条件查询的时候，但是又不能用click事件，所以个人感觉用change事件更好用一些。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值