Récupère la valeur sélectionnée dans le contrôleur pour en remplir une autre <select> dans AngularJS

-1

L'exigence est d'afficher l'option sélectionnée dans le contrôleur et de remplir d'autres sélections en fonction de l'option actuellement sélectionnée.Récupère la valeur sélectionnée dans le contrôleur pour en remplir une autre <select> dans AngularJS

Ci-dessous l'extrait de code HTML:

<html ng-app="myApp"> 
.... 
<section ng-controller="myCtrl"> 
    <select ng-model="selectedName" ng-options="x for x in category"> 
</select> 
    <select ng-model="selectedSubName" ng-options="x for x in subcategory"> 
</select> 
</section> 
.... 
</html>

Le contrôleur utilisé:

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 

$scope.category = ["Design", "UI", "Web Stack", "Unit Testing"]; 
//Use Conditional Statements to populate options for the other <select> 
    i.e, subcategory 

$scope.subcategory = ["HTML", "CSS", "JS", "Java"]; 
}); 
</script>

Source

2017-09-19 BIPIN SHARMA

J'espère que '-à-dire, la ligne de subcategory' est commenté ou n'existe pas dans le code réel –

Utilisez ng-change pour déclencher une fonction qui renseigne votre deuxième liste

<html ng-app="myApp"> 
.... 
<section ng-controller="myCtrl"> 
    <select ng-model="selectedName" ng-options="x for x in category" ng-change="foo(selectedName)"> 
</select> 
    <select ng-model="selectedSubName" ng-options="x for x in subcategory"> 
</select> 
</section> 
.... 
</html>

Et dans votre contrôleur:

$scope.foo=function(category){ 
//conditional code to populate subcategory 
}

Source

2017-09-19 07:19:07

$ scope.foo = function (catégorie) { \t \t \t // code conditionnel pour remplir la sous-catégorie \t \t \t si (category == 'Design') { \t \t \t \t alerte (catégorie); \t \t \t \t $ scope.subcategory = ["Modèles de conception", "UML"]; \t \t \t} –

J'ai ajouté le code ci-dessus, cela affiche une alerte avec Design. Mais, ** pas en mesure de remplir ** le –

Voici un jsfiddle qui a fonctionné https://jsfiddle.net/v6sxhbz0/ –

Si vous utilisez des catégories/sous-catégories, je peux proposer une approche peu différente.

d'abord définir vos catégories d'objet comme ceci:

$scope.categories = { 
    'Design': ['Photoshop','Illustrator'], 
    'UI' : ["HTML", "CSS"], 
    'Web Stack': ['PHP', 'Java'] 
}

maintenant vous pouvez faire quelque chose comme en html:

<select ng-model="selectedName" ng-options="x for x in Object.keys(categories)"> 
<select ng-model="selectedSubName" ng-options="x for x in categories[selectedName]">

garder à l'esprit que ce n'a pas été testé de manière peut-être besoin des petits changements, mais si j'ai compris ce dont vous avez besoin, il est logique de l'avoir dans un objet.

Source

2017-09-19 07:24:48 pegla

Récupère la valeur sélectionnée dans le contrôleur pour en remplir une autre <select> dans AngularJS

Répondre

Questions connexes