angularjs模块化开发中,遇到几次下拉菜单实现搜索功能的案例,现整理一下select中ng-repeat 和ng-options的用法和获取值的方法
一,ng-repeat
1,HTML
<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
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
<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
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值变化后的查询等操作 } });