答案 0 :(得分：0)
ng-show允许您利用数据绑定，因此您不必像在vanilla JS中那样手动监视事件（使用事件处理程序或onchange属性）。这是在angularJs中做事的首选方式。只有在没有其他选择时才使用ngChange。
此外，在这里使用ng-if可能更好，因为如果不显示，您将节省构建表的成本。
答案 1 :(得分：0)
使用ng-change和filter指令来实现您期望的行为，请查看此代码段
var app = angular.module("myColors", []);
app.controller("cController", function($scope) {
$scope.selectedFruit = null;
$scope.selectedCar = null;
$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"]
}];
$scope.selectFruit = function(selectedItem){
$scope.selectedFruit = selectedItem.value;
}
$scope.selectCar = function(selectedItem){
$scope.selectedCar = selectedItem.value;
}
});table, th, td {
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<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="selectFruit(selectedAnswer1)"></select>
<pre>{{selectedAnswer1}}</pre>
<h3>drop down 2</h3>
<select ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2" ng-change="selectCar(selectedAnswer2)"></select>
<pre>{{selectedAnswer2}}</pre>
<hr>
<h4>
table 1
</h4>
<table>
<tr>
<td>ID</td>
<td>Category</td>
</tr>
<tr ng-repeat="f in fruit | filter:selectedFruit">
<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 | filter:selectedCar">
<td>{{c.category}}</td>
</tr>
</table>
</div>
</div>
答案 2 :(得分：0)
更新： 据我所知，如果选择第一个表，你只想显示/隐藏另一个表。这是一个简单的解决方案：
<div ng-app="myColors">
<div ng-controller="cController">
<h3>drop down 1</h3>
<select name="select1" ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change="selection1Change()"></select>
<pre>{{selectedAnswer1}}</pre>
<h3>drop down 2</h3>
<select name="select2" ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2" ng-change="selection2Change()"></select>
<pre>{{selectedAnswer2}}</pre>
<hr>
<div ng-show="selectedAnswer1 && flag1">
<h4>
table 1
</h4>
<table>
<tr>
<td>ID</td>
<td>Category</td>
</tr>
<tr ng-repeat="f in fruit" ng-show="selectedAnswer1.value === f.id">
<div >
<td >{{f.id}}</td>
<td >{{f.f_category}}</td>
</div>
</tr>
</table>
</div>
<div ng-show="selectedAnswer2 && flag2">
<h4>
table 2
</h4>
<table>
<tr>
<td>Car</td>
</tr>
<tr ng-repeat="c in car" ng-show="selectedAnswer2.value === c.name">
<td>{{c.category}}</td>
</tr>
</table>
</div>
</div>
</div>
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"]
}];
$scope.selection1Change = function(){
$scope.flag1 = true;
$scope.flag2 = false;
}
$scope.selection2Change = function(){
$scope.flag1 = false;
$scope.flag2 = true;
}
});
OLD： 不需要使用ng-change，因为angularjs本身会更新ng-model的值，所以你可以使用ng-show和ng-model的值，如下面的代码所示：
<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"></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 ng-show="selectedAnswer1">
<tr>
<td>ID</td>
<td>Category</td>
</tr>
<tr ng-repeat="f in fruit" ng-show="selectedAnswer1.value === f.id">
<div >
<td >{{f.id}}</td>
<td >{{f.f_category}}</td>
</div>
</tr>
</table>
<h4>
table 2
</h4>
<table ng-show="selectedAnswer2">
<tr>
<td>Car</td>
</tr>
<tr ng-repeat="c in car" ng-show="selectedAnswer2.value === c.name">
<td>{{c.category}}</td>
</tr>
</table>
</div>
</div>