結合NG-オプションは

Question

私はこのような配列のコレクションを持っている：

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

は、私がして選択し、NG-オプションをmstepusing hstepこれら二つのフィールドのドロップダウンリストを作りたいです。ここ は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-options構文の問題を教えてください。

P.S.私は角度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"、機能（$スコープ、$ uibModalInstance）

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

}); 

Answer 1

あなたのコントローラで定義されたすべてのスコープ変数を使用することが習慣ので、あなたはモーダルを作成するときに、このモーダルで使用する範囲は、デフォルトで$ rootScopeです。

DOC：

スコープ（タイプ：$スコープ） - モーダルのコンテンツに使用する親スコープのインスタンス。

あなたはresolveオプションパラメータ

にデータを渡すことができ

$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 */ 
)} 

OR使用決意パラメータ：$ rootScopeデフォルトは

あなたは、コントローラのスコープを使用するscopeを指定する必要があります

$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-ui-bootstrap modalで

---

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>