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

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

一，ng-repeat

1,HTML

[html]

1. <

   select

   ng-model

   “selectedItems”

   ng-change

   “chenge()”

2. <

   option

   ng-repeat

   “x in items”

   value

   “{ {x.id}}”

   { {x.name}} </

   option

3. </

   select

4. <

   h1

   你选择的是: { {selectedItems}} </

   h1

2,

[javascript]

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]

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]

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事件更好用一些。