通过阵列收集的绑定ng选项

Question

我有类似的数组的集合：

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

我想列出这两个字段HSTEP和MSTEPASESSECT和NG-OPTIONS的下拉列表。这是ng选项的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选项语法是什么问题？

P.S。我想将此下拉菜放在Angular JS的模态窗口中。

这是我的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"，function（$ scope，$ uibmodalinstance）

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

Answer 1

使用Angular-UI-Bootstrap模态，当您在此模态中创建模态时，默认情况下是$ Rootscope，因此您无法使用控制器中定义的所有范围变量。

doc：

范围（类型：$ scope） - 用于该的父范围实例 模态的内容。默认为$ 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参数

您可以在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/

Answer 2

• 请检查您的角版。

• 请检查您的控制台窗口中还有其他错误

• 请初始化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>