将 ng-options 与数组集合绑定

Question

我有这样的数组集合：

   $scope.table = {
   hstep: [1, 2, 3],
   mstep: [1, 5, 10, 15, 25, 30]
   };

我想使用 select 和 ng-options 创建 hstep 和 mstep 这两个字段的下拉列表。这是 ng-options 下拉列表的 html 代码：

   <div class="col-xs-6">
   Hours step is:
   <select class="form-control" ng-model="hstep" ng-options="opt for 
   opt in table.hstep"></select>
   </div>
   <div class="col-xs-6">
   Minutes step is:
   <select class="form-control" ng-model="mstep" ng-options="opt for 
   opt in table.mstep"></select>
   </div>

但问题是当我使用上面的代码时，下拉菜单不起作用意味着点击下拉菜单，它不会向下给出项目列表。

谁能告诉我这个 ng-options 语法有什么问题？

P.S。我想在 angular js.

中将此下拉菜单放在模态 window 中

这是我的js代码：

var app = angular.module('myApp', 
    ['ngTouch','ngAnimate','ui.bootstrap']);


app.controller("MainController",
['$scope','$uibModal',function($scope,$uibModal){

$scope.openModal = function(){
$scope.modalInstance = $uibModal.open({
templateUrl: 'modal.html',
controller :'ModalHandlerController',
 size: 'lg',
 });
 }

 $scope.mytime = new Date();
 $scope.table = {
 hstep: [1, 2, 3],
 mstep: [1, 5, 10, 15, 25, 30]
 };
 $scope.hstep = 1;
 $scope.mstep = 15;
 }]);

app.controller("ModalHandlerController",函数($scope,$uibModalInstance)

{  
 $scope.ok = function(){
 $uibModalInstance.close('save');
 }

 });

Answer 1

请检查您的 angular 版本。
请检查您的控制台是否还有其他错误window
请按以下代码段初始化 hstep 和 mstep 模型对象。

其他-副你的代码是完美的。

angular.module("app",[]).controller("appContr",function($scope)
{
 $scope.table = {
   hstep: [1, 2, 3],
   mstep: [1, 5, 10, 15, 25, 30]
   };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="appContr">
                   <div class="col-xs-6">
   Hours step is:
   <select class="form-control" ng-init="hstep=table.hstep[0]" ng-model="hstep" ng-options="opt for 
   opt in table.hstep"></select>
   </div>
   <div class="col-xs-6">
   Minutes step is:
   <select class="form-control" ng-init="mstep=table.mstep[0]"  ng-model="mstep" ng-options="opt for 
   opt in table.mstep"></select>
   </div>
                </div>

Answer 2

使用angular-ui-bootstrap modal，当你创建模态时，在这个模态中使用的作用域默认是$rootScope，所以你不能使用你的控制器中定义的所有作用域变量。

文档：

scope (Type: $scope) - The parent scope instance to be used for the modal's content. Defaults to $rootScope

您需要指定 scope 才能使用控制器的范围：

$scope.table = {
  hstep: [1, 2, 3],
  mstep: [1, 5, 10, 15, 25, 30]
};
var modalInstance = $uibModal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  scope: $scope /* <----- HERE to use the controller scope */
)}

或使用解析参数

可以在resolve选项参数中传递数据

$scope.table = {
  hstep: [1, 2, 3],
  mstep: [1, 5, 10, 15, 25, 30]
};
var modalInstance = $uibModal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    table: function() {
      return $scope.table;
    }
  }
});

然后您可以将它注入到您的模态控制器中：

app.controller('ModalInstanceCtrl', function($scope, $uibModalInstance, table) {
  $scope.table = table;
});

https://embed.plnkr.co/NaR7oUNC65ULJTSaKJBh/

将 ng-options 与数组集合绑定

binding ng-options with collection of arrays

angularjs

angular-ui-bootstrap

bootstrap-modal

angularjs-ng-options