如何获取所选项目值

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

＆＃13;

＆＃13;

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'
  }];

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;