MISE À JOUR: Désolé, je l'ai fait plus clair, mais ce que je voulais aussi été si je choisis de la « déroulante 1 » autre que la valeur null, mon tableau 2 automatiquement disparait b/c Je veux seulement voir le tableau 1 lorsque j'utilise menu déroulant 1. Même chose pour "déroulant 2". Si je choisis des valeurs non nulles de , 2, ma table 1 disparaît et je ne vois que table 2. J'ai aussi mis à jour mon Fiddle ici https://jsfiddle.net/missggnyc/4vod1L9g/7/ et les tables se cachent si les valeurs null sont sélectionnées dans le menu déroulant . Tout ce dont j'ai besoin maintenant, c'est comment montrer l'une ou l'autre table en fonction de la liste déroulante que j'utilise.ng-anguleuse et ng changement pour afficher et masquer les tables en fonction de la sélection de l'utilisateur dans <select> tag
POST ORIGINAL: Je reçois un peu confus sur la façon d'utiliser ng-show ou ng-change pour montrer mes deux tables différentes en fonction de la sélection de l'utilisateur avec deux dif. déroulants.
Voici le scénario:
Tant que l'utilisateur ne sélectionne pas SELECT YOUR ANSWER avec null valeur dans les deux bas de chute, j'ai un filtre qui fait la comparaison de chaînes et filtre par couleur. C'est ce que je veux faire.
utilisateur sélectionne « déroulant 1 »
- afficher le tableau 1 avec des résultats filtrés si l'utilisateur ne sélectionne pas « SELECT VOTRE RÉPONSE » avec une valeur nulle
- si l'utilisateur sélectionne « SELECT VOTRE RÉPONSE », aucune tables sont affichés
- cacher le tableau 2 aussi longtemps que « déroulant 1 » est sélectionné se
utilisateur sélectionne « déroulant 2 »
- Afficher le tableau 2 avec des résultats filtrés si l'utilisateur ne sélectionne pas « CHOISISSEZ VOTRE RÉPONSE » avec la valeur NULL
- si l'utilisateur sélectionne « SELECT VOTRE RÉPONSE », aucune tables sont affichés
- cacher le tableau 2 tant que "drop down 1" est sélectionné
Je suis confus sur la façon d'utiliser ng-show ou ng-change dans mon cas. Aucune suggestion?
HTML
<div ng-app="myColors">
<div ng-controller="cController">
<h3>drop down 1</h3>
<select ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change=""></select>
<pre>{{selectedAnswer1}}</pre>
<h3>drop down 2</h3>
<select ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2"></select>
<pre>{{selectedAnswer2}}</pre>
<hr>
<h4>
table 1
</h4>
<table>
<tr>
<td>ID</td>
<td>Category</td>
</tr>
<tr ng-repeat="f in fruit">
<td>{{f.id}}</td>
<td>{{f.f_category}}</td>
</tr>
</table>
<h4>
table 2
</h4>
<table>
<tr>
<td>Car</td>
</tr>
<tr ng-repeat="c in car">
<td>{{c.category}}</td>
</tr>
</table>
</div>
</div>
JS
var app = angular.module("myColors", []);
app.controller("cController", function($scope) {
$scope.mySelection1 = [
{"cat": "SELECT YOUR ANSWER", "value": null},
{"cat": "YELLOW", "value": "yellow"},
{"cat": "ORANGE", "value": "orange"}
];
$scope.mySelection2 = [
{"cat": "SELECT YOUR ANSWER", "value": null },
{"cat": "GREEN CAR", "value": "green"},
{"cat": "BLUE CAR", "value": "blue"}
];
$scope.fruit = [{
"id": "red",
"f_category": ["Apple", "Strawberry", "Pineapple"]
}, {
"id": "yellow",
"f_category": ["Banana", "Pineapple"]
}, {
"id": "orange",
"f_category": ["Peach", "Nectarine"]
}];
$scope.car = [{
"name": "yellow",
"category": ["SUV", "Truck"]
}, {
"name": "blue",
"category": ["Van"]
}, {
"name": "orange",
"category": ["Mini-Van"]
}];
});
Wow ... beaucoup plus simple que je ne le pensais. Juste déclenchement avec le combo vrai et faux. Merci d'avoir répondu!!! – missgg