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

时间:2022-11-25 17:19:27

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


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