Question

尽管数组中填充了值，但为什么值未定义。
尽管存在这些值，但为什么它显示为未定义。

var app= angular.module('myApp',[]);
app.controller('myController',function($scope){
  $scope.city=['Odisha','Hyderabad'];
});

div{
  text-align: center;
}

<htmL>
  <head>
    <title>Movie Ticket Booking</title>
  </head>
  
  <body ng-app="myApp" ng-controller="myController">
    <div>
      Choose City:<select ng-model="cities" ng-change="changeCity()" ng-options="items for item in city"></select>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </body>
  </html>

Answer 1

您需要使用item代替items

var app= angular.module('myApp',[]);
app.controller('myController',function($scope){
  $scope.city=['Odisha','Hyderabad'];
});

div{
  text-align: center;
}

<htmL>
  <head>
    <title>Movie Ticket Booking</title>
  </head>
  
  <body ng-app="myApp" ng-controller="myController">
    <div>
      Choose City:<select ng-model="cities" ng-change="changeCity()" ng-options="item for item in city track by item"></select>
    </div>
    <div>{{cities}}</div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </body>
  </html>

Answer 2

您可以尝试此解决方案

var app= angular.module('myApp',[]);
app.controller('myController',function($scope){
  $scope.city=['Odisha','Hyderabad'];

  $scope.changeCity=function(){
     alert($scope.selectedName)
  }
});

div{
  text-align: center;
}

<htmL>
  <head>
    <title>Movie Ticket Booking</title>
  </head>
  
  <body ng-app="myApp" ng-controller="myController">
    <div>
      Choose City:<select ng-model="selectedName" ng-change="changeCity()" ng-options="item for item in city"></select>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </body>
  </html>

尽管使用值填充数组，但值未定义

2 个答案: