【发布时间】：2017-02-24 13:56:13
【问题描述】：
更新：抱歉，我应该说得更清楚，但我想要的是 如果我从“下拉 1”中选择而不是 @987654323 @value，我的 table 2 自动 消失 b/c 我只想看到 table 1 当我使用 drop down 1。 “下拉 2” 也是如此。如果我从 drop down 2 中选择任何非空值，我的表 1 就会消失，而我只能看到 表 2。 我还在这里更新了我的 Fiddle https://jsfiddle.net/missggnyc/4vod1L9g/7/ 和表如果从下拉列表中选择了 null 值，则隐藏。我现在需要的是如何根据我使用的下拉菜单显示一个或另一个表。
原帖：
我对如何使用ng-show 或ng-change 来显示我的两个不同的表格感到有点困惑，具体取决于用户选择的两个差异。下拉菜单。
这是场景：
只要用户在两个下拉列表中都没有选择SELECT YOUR ANSWER 和null 值，我就有一个过滤器可以进行字符串比较并按颜色过滤掉。这就是我想做的。
用户从“下拉1”中选择
- 如果用户没有选择“SELECT YOUR ANSWER”且值为空，则显示带有过滤结果的表 1
- 如果用户选择“选择您的答案”，则不会显示任何表格
- 只要“下拉 1”被选中，就隐藏表 2
用户从“下拉2”中选择
- 如果用户没有选择“SELECT YOUR ANSWER”且值为空，则显示带有过滤结果的表 2
- 如果用户选择“选择您的答案”，则不会显示任何表格
- 只要“下拉 1”被选中，就隐藏表 2
我对如何在我的情况下使用 ng-show 或 ng-change 感到困惑。有什么建议吗？
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"]
}];
});
【问题讨论】：
标签： javascript angularjs show-hide ng-show angularjs-ng-change