Angular ng-show 和 ng-change 根据用户在 <select> 标签中的选择显示和隐藏表格

Question

更新： 对不起，我应该说得更清楚，但我想要的也是 如果我 select 来自 "drop down 1" 除了 null 值，我的 table 2 自动消失 b/c 我在使用下拉1时只想看到table1。 "drop down 2" 也一样。如果我从 下拉列表 2 中选择任何非空值，我的 table 1 就会消失，我只会看到 table 2. 我还在 https://jsfiddle.net/missggnyc/4vod1L9g/7/ 更新了我的 Fiddle，如果 null 值是从下拉列表中 select 编辑的，table 就会隐藏。我现在需要的是如何显示一个或另一个 table 取决于我使用的是哪个下拉菜单。

原版POST: 我对如何使用 ng-show 或 ng-change 显示我的两个不同的 tables 感到有点困惑，具体取决于用户 selection 和两个 dif。下拉菜单。

场景如下：

只要用户没有在两个下拉列表中使用 select SELECT YOUR ANSWER 和 null 值，我就有一个过滤器可以进行字符串比较并按颜色过滤掉。这就是我想要做的。

用户 select 来自 "drop down 1"

显示 table 1，如果用户没有 select "SELECT YOUR ANSWER" 和空值
如果用户 selects "SELECT YOUR ANSWER"，则不会显示 tables
隐藏 table 2 只要 "drop down 1" 得到 selected

用户 select 来自 "drop down 2"

显示 table 2 如果用户不使用空值 select "SELECT YOUR ANSWER" 过滤结果
如果用户 selects "SELECT YOUR ANSWER"，则不会显示 tables
隐藏 table 2 只要 "drop down 1" 得到 selected

我对如何在我的案例中使用 ng-show 或 ng-change 感到困惑。有什么建议吗？

See demo here

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"]
  }];

});

Answer 1

ng-show 允许您利用数据绑定，因此您不必像在 vanilla JS 中那样手动观察事件（使用事件处理程序或 onchange 属性）。这是在 angularJs 中做事的首选方式。只有在别无选择时才使用 ngChange。

此外，在这里使用 ng-if 可能会更好，因为在未显示时您可以节省构建表格的成本。

Answer 2

使用 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>

Answer 3

更新：据我了解，如果第一个是 select，您只需要 show/hide 另一个 table。这是一个简单的解决方案：

 <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;
  }
});

旧：不需要使用 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>

Angular ng-show 和 ng-change 根据用户在 <select> 标签中的选择显示和隐藏表格

Angular ng-show and ng-change to show and hide tables depending on the user selection in <select> tag

javascript

show-hide

angularjs

ng-show

angularjs-ng-change