关于javascript：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

更新：不好意思，我应该说得更清楚，但我想要的也是，如果我从"下拉1"中选择，而不是从null值中选择，我的表2会自动消失。我只想在使用下拉1时看到表1。与"下拉2"相同。如果我从下拉列表2中选择任何非空值，我的表1将消失，我只看到表2。我也在这里更新了我的小提琴https://jsfiddle.net/missggnyc/4vod1l9g/7/，如果从下拉列表中选择了null值，表将隐藏。现在我需要的是如何根据使用的下拉列表显示一张或另一张表。

原始职位：我对如何使用ng-show或ng-change显示我的两个不同的表感到有点困惑，这取决于使用两个dif的用户选择。下落。

下面是场景：

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

用户从"下拉1"中选择

  • 如果用户未选择空值为"选择您的答案"，则显示带筛选结果的表1
  • 如果用户选择"选择您的答案"，则不显示表格。
  • 只要选择了"下拉1"，就隐藏表2

用户从"下拉2"中选择

  • 如果用户没有选择空值为"选择您的答案"，则显示带有筛选结果的表2
  • 如果用户选择"选择您的答案"，则不显示表格。
  • 只要选择了"下拉1"，就隐藏表2

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

在这里看到演示

HTML

1
2
3
    drop down 1
    <select ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change=""></select>
    [cc lang="javascript"]{{selectedAnswer1}}

下拉2

1
{{selectedAnswer2}}

表1

<表>

ID

类别

F.ID F.F U类

<表>

表2

<表><汽车>

C.类别

<表>< /代码>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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"]
  }];

});

UPDATE:
as far I understood you only want show/hide the other table if the first one is select. Here is a simple solution:

1
2
3
    drop down 1
    <select name="select1" ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change="selection1Change()"></select>
    [cc lang="javascript"]{{selectedAnswer1}}

下拉2

1
{{selectedAnswer2}}

表1

<表>

ID

类别

F.ID F.F U类

<表>

表2

<表><汽车>

C.类别

<表>< /代码>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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的值，如下代码所示：

1
2
3
    drop down 1
    <select ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1"></select>
    [cc lang="javascript"]{{selectedAnswer1}}

下拉2

1
{{selectedAnswer2}}

表1

<表>

表2

ID 类别
F.ID {{f.f_category}}
<汽车>

<表>< /代码>

相关讨论

使用ng-change和filter指令，您可以实现预期的行为，请看下面的代码片段

[cc lang="javascript"]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

ng-show允许您利用数据绑定，因此您不必像在普通JS中那样手动监视事件(使用事件处理程序或onchange属性)。这是在安古拉基做事情的首选方式。只有当你别无选择时才使用ngchange。

另外，在这里使用ng-if可能会更好，因为如果没有显示，您可以节省构建表的成本。

C.类别