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值变化后的查询等操作
}
});