ng-options de liaison avec la collecte de tableaux

Question

j'ai collection de tableaux comme celui-ci:

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

Je veux faire une liste déroulante de ces deux champs hstep et mstepusing sélectionner et ng-options. Voici le code html pour les options ng-déroulant:

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

Mais le problème est quand j'utilise le code ci-dessus, la chute ne baisse fonctionne pas signifie en cliquant sur le menu déroulant, il donnera pas une liste des articles vers le bas.

Quelqu'un peut-il dire ce qui ne va pas avec cette syntaxe ng-options?

P.S. Je veux placer cette liste déroulante dans une fenêtre modale en js angulaire.

Voici mon code 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", la fonction (portée de $, $ uibModalInstance)

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

}); 

Answer 1

Avec angular-ui-bootstrap modal, lorsque vous créez un modales la portée en utilisant dans ce modal est par défaut rootScope de $, de sorte que vous ne pourrez pas utiliser toutes les variables de portée définie dans votre contrôleur.

doc:

champ (Type: portée de $) - L'instance de champ parent à utiliser pour le contenu du modal.Par défaut $ rootScope

Vous devez spécifier le scope d'utiliser la portée du contrôleur:

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

OU resolve paramètre

vous pouvez transmettre les données dans le paramètre d'option 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; 
    } 
    } 
}); 

vous pouvez ensuite l'injecter dans votre contrôleur Modal:

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

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

Answer 2

• S'il vous plaît vérifier votre version angulaire

• veuillez vérifier que vous avez d'autres erreurs dans votre fenêtre de console

• Veuillez initialiser l'objet modèle hstep et mstep comme extrait ci-dessous.

Autre-votre code est parfait.

---

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>