如何获得所选项目的值
问题描述:
我在HTML页面中创建列表:如何获得所选项目的值
<label class="item item-input">
<span class="input-label">Select date</span>
<select ng-model="search.dateOption" ng-options="opt as opt.label for opt in options">
</select>
</label>
在我的控制器中我定义的选项:
$scope.options = [
{ label: 'Today'},
{ label: 'This week'},
{ label: 'This month'},
{ label:'Other'}
]
我用下面的函数来获得所选择的项目:
$scope.selectedDate = function(){
$scope.search={}
console.log($scope.search)
}
我在我的控制台中得到undefined
。
答
试试这个。
var editer = angular.module('editer', []);
function myCtrl($scope) {
$scope.options = [
{ label: 'Today'},
{ label: 'This week'},
{ label: 'This month'},
{ label:'Other'}
];
$scope.selectedDate = function(){
console.log($scope.search)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="editer" ng-controller="myCtrl" class="container">
<label class="item item-input">
<span class="input-label">Select date</span>
<select ng-model="search.dateOption" ng-options="opt as opt.label for opt in options" ng-change="selectedDate()">
</select>
</label>
<pre>{{search | json}}</pre>
</div>
答
其更好地为您的下拉列表中选择ID对象
var editer = angular.module('editer', []);
function myCtrl($scope) {
$scope.dateOption = null;
$scope.options = [{
id: 1,
label: 'Today'
}, {
id: 2,
label: 'This week'
}, {
id: 3,
label: 'This month'
}, {
id: 4,
label: 'Other'
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="editer" ng-controller="myCtrl" class="container">
<label class="item item-input">
<span class="input-label">Select date</span>
<select ng-model="dateOption" ng-options="opt as opt.label for opt in options">
</select>
</label>
<pre>{{dateOption}}</pre>
</div>
+0
感谢你的回复。我的控制器的dateOption的值? –
+0
你可以设置$ scope.dateOption = null; –
谢谢您的答复。它在这里工作,但在我的项目并没有工作。可能是我的angularjs版本的利益。我正在使用1.5.5 –
编号在控制台显示什么? –
没有任何东西显示在控制台只是'undefined'。'
' –