Javascript Girl
  1. Javascript Girl
  3. NgOptions par défaut sur les modèles parent / enfant AngularJS
Intereting Posts
Est-il possible de rendre partiel sur le clic sans link_to? Javascript regex pour extraire tous les caractères entre guillemets suite à un mot spécifique Erreur VBS Script getElementbyID (script AutoLogin) Firebase v3 Query by Grandchild Impossible de charger la ressource: le serveur a répondu avec un état de 404 (introuvable) TypeError: Impossible de lire la propriété 'push' de undefined, JavaScript Comment exécuter des fonctions en parallèle avec async.js? Comment analyser json string à javascript object Effectuez un élément <li> entier pouvant être cliqué, mais ne déclenchez pas le lien lorsque vous cliquez sur les liens internes Extension de l'erreur en version JavaScript avec ES6 Autoriser les documents de contenu (pages Web) à détecter mon addon Firefox AngularJS: communication entre directives Élément Autoresize (div) pour adapter le contenu horizontal Capturez la sélection de texte dans Google Docs Enregistrer les fichiers reçus de xmpp Strophe si-filetransfer

NgOptions par défaut sur les modèles parent / enfant AngularJS

Comment affecte-t-on les ngOptions par défaut à travers les modèles parent / enfant?

Dans cette question, OP montre une forme de ngOptions parent / enfant utilisant ngOptions

modèle 

 <select ng-model="x.site" ng-options="s.site for s in data"></select> <select ng-model="x.name" ng-options="b.name for b in x.site.buildings"></select>

manette 

 $scope.x = {}; $scope.data = [ { "site" : "Brands Hatch", "buildings" : [ { "name" : "Building #1" }, { "name" : "Building #2" }, { "name" : "Building #3" } ] },{ "site" : "Silverstone", "buildings" : [ { "name" : "Building #4" }, { "name" : "Building #5" }, { "name" : "Building #6" } ] } ];

Ce que vous verrez dans cette fourchette, c'est que les menus déroulants n'ont pas de valeurs par défaut — C'est-à-dire, l'option par défaut est " vide ". Dans un cas d'utilisation normal, cela ne pose pas de problème et les options par défaut sont facilement configurables par le contrôleur qui s'explique bien dans les documents .

  • Comment puis-je éliminer les options «vierges» pour les modèles parents / enfants utilisant ngOptions ?
  • Comment puis-je sélectionner les options par défaut via la vue ou dynamiquement via le contrôleur . Il est important de rappeler ici que les options de sélection par défaut de l'enfant dépendent d'abord de l'option choisie par les parents.

L'élément vide est causé par la valeur du modèle vide. Vous pouvez essayer de mettre le code suivant à la fin du contrôleur. L'astuce consiste à initialiser le site , le bâtiment et le plancher lorsque la page est chargée ainsi que lorsque la valeur du site est modifiée. J'espère que cela aide. 

 $scope.selected = { site: $scope.data[0], building: $scope.data[0].buildings[0], floor: $scope.data[0].floors[0] }; $scope.$watch('selected.site', function () { console.log($scope.selected.site); $scope.selected = { site: $scope.selected.site, building: $scope.selected.site.buildings[0], floor: $scope.selected.site.floors[0] }; });