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

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


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

一，ng-repeat

1,HTML

[html]
view plain
copy

<select ng-model="selectedItems" ng-change="chenge()">  
<option ng-repeat="x in items" value="{{x.id}}">{{x.name}}</option>  
</select>  
  
<h1>你选择的是: {{selectedItems}}</h1>  

2,js

[javascript]
view plain
copy

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

二，ng-options
1,HTML

[html]
view plain
copy

<select ng-model="selectedItems" ng-options="x.name for x in items">  
</select>  
<h1>name: {{selectedItems.name}}</h1>  
<h1>id: {{selectedItems.id}}</h1>  

2,JS

[javascript]
view plain
copy

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

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