如何获得所选项目的值

Question

我在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。

Answer 1

试试这个。

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>

Answer 2

其更好地为您的下拉列表中选择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>