angularjs ng-显示多个 div 并清除未选择的模型值

Question

我有带有下拉值的输入字段：A、B、... Z，称为 ng-model=model.all。
如果 ng-model=model.all 的值等于 Option Z，我想 ng-show 另一个 <div>。这部分工作正常。但问题是：

如果从第一个值中选择除 Option Z 以外的任何其他值，我如何才能显示 Acat <div>？我尝试了 ng-show="model.all != 'Option Z' ，但即使未选择任何内容，它也会显示 <div> 。 It just need to show the other div ONLY IF something other than Option Z is selected.

如您所见，仅当 Acat 不为空时才会显示我的 Bcat，这没问题。
但是，如果我更改我在第一个中的选择并选择 Option Z，然后其他两个 div 仍然保持它们的值，所以目标是在 时清除它们选项 Z 被选中，反之亦然，如果选择了其他内容，则其他 div 将填充值，如果用户决定更改选择并选择 选项 Z 那么之前 div 中的那些值也应该被清除。

<div class="form-group">
    <label class="control-label">ALL</label>
    <ui-select ng-model="model.all" name="all">
        ...
    </ui-select>
</div>


<div class="form-group" ng-show="model.all == 'Option Z'">
    <label>Z categories</label>
    <ui-select name="Zcat" ng-model="model.z">
        ...
    </ui-select>    
</div>

<div class="form-group" ng-show="???">
    <label class="control-label">Category A</label>
    <ui-select name="Acat" ng-model="model.a">
        ...
    </ui-select>
</div>
<div class="form-group" ng-show="!model.a">
    <label class="control-label">Category B</label>
    <ui-select name="Bcat" ng-model="model.b" >
        ...
    </ui-select>
</div>

更新：

在 Mosh Feu 的回答后添加一个简短的注释：
正如您在屏幕截图 http://imgur.com/gSYztLq 中看到的那样，这永远不会发生。
或者，我通过
{"all": "Option Z", "z": "Option Z1"}
或
{"all": "Option A", "a": "Option A1", "b": "Option B1"} .
这不被接受：
{"all": "Option A", "a": "Option A1", "b": "Option B1", "z": "null"}
也不被接受：
{"all": "Option Z", "z": "Option Z1", "a": "null", "b": "null"}.

Answer 1

希望这会帮助您，您只需要在 select 表单中添加 ng-change

<html ng-app="myapp">
 <!-- Body tag augmented with ngController directive  -->
 <body ng-controller="MyController">
 
 <form name="myForm">
    <label for="singleSelect"> All </label><br>
    <select name="singleSelect" ng-model="catselect" ng-change="cat()">
      <option value="a">Acat</option>
      <option value="b">Bcat</option>
   <option value="z">Zcat</option>
    </select><br>
 
 

  </form>
 
 <div ng-show="ashow" >This is Acat Div</div>
 <div ng-show="bshow">This is Bcat Div</div>
 <div ng-show="zshow">This is Zcat Div</div>
 
      
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
   <script type="text/javascript">
 var app = angular.module('myapp',[]);
 app.controller("MyController", ["$scope", function($scope) { 
 
 // you can also get this data from external-json-object
 
 
 $scope.ashow = true;
 $scope.bshow = true;
 $scope.zshow = true;
 
 
  

    $scope.cat = function(){

  if($scope.catselect == "z"){
  $scope.ashow = false;
  }else{
   $scope.ashow = true;
 $scope.bshow = true;
 $scope.zshow = true;
  }
 } 
}]);
   </script>
   
 </body>
</html>

Answer 2

如果我没理解错的话，你需要检查 model.all 是否被选中并且不等于 Option Z。如果是这样，检查很简单：

// !!model.all - to check if anything selected
!!model.all && model.all != 'Option Z'

关于第二部分。当 select 更改且值为 Option Z 时，只需将 a 和 b 设置为 null（在代码中查看）。

我希望我在所有方面都回答了你，但如果没有，请告诉我。

注意：您还可以在pre.

中看到模型

angular.module('myApp', []).
controller('ctrl', function() {
  var model = this;
  
  model.shouldShowACat = function() {
    return !!model.all && model.all != 'Option Z';
  };
  
  model.clearAB = function() {
    if (model.all == 'Option Z') {
      model.a = null;
      model.b = null;
    }
  };
});

pre {
  background: silver;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl as model">
  <div class="form-group">
    <label class="control-label">ALL</label>
    <select ng-model="model.all" name="all" ng-change="model.clearAB()">
      <option>Option A</option>
      <option>Option B</option>
      <option>Option Z</option>
    </select>
  </div>
  <div class="form-group" ng-show="model.all == 'Option Z'">
    <label>Z categories</label>
    <select name="Zcat" ng-model="model.z">
      <option>Option Z1</option>
      <option>Option Z2</option>
    </select>    
  </div>
  <div class="form-group" ng-show="model.shouldShowACat()">
    <label class="control-label">Category A</label>
    <select name="Acat" ng-model="model.a">
      <option>Option A1</option>
      <option>Option A2</option>
    </select>
  </div>
  <div class="form-group" ng-show="!model.a">
    <label class="control-label">Category B</label>
    <select name="Bcat" ng-model="model.b" >
      <option>Option B1</option>
      <option>Option B2</option>
    </select>
  </div>
  <pre ng-bind="model | json"></pre>
</div>

Answer 3

您可以使用 ng-change 事件和 ng-if。参考以下

html

<div class="form-group">
    <label class="control-label">ALL</label>
    <ui-select ng-model="model.all" name="all" ng-change="populateCatA()">
        ...
    </ui-select>
</div>

// I used ng-if here, so that the dom is removed, not hidden 
<div class="form-group" ng-if="showCatA">
    <label class="control-label">Category A</label>
    <ui-select name="Acat" ng-model="model.a">
        ...
    </ui-select>
</div>

Js 控制器

$scope.showCatA = false;
var populateCatA = function () {
    if ($scope.model.all != 'Option Z') {
         $scope.showCatA = true;
    } else {
         $scope.showCatA = false;
    }
}

Answer 4

这可能适合你：

<div class="form-group">
    <label class="control-label">ALL</label>
    <ui-select ng-model="model.all" ng-change="onModelChange()" name="all">
        ...
    </ui-select>
</div>


<div class="form-group" ng-show="model.all == 'Option Z'">
    <label>Z categories</label>
    <ui-select name="Zcat" ng-model="model.z">
        ...
    </ui-select>    
</div>

<div class="form-group" ng-show="!!model.all && model.all != 'Option Z'">
    <label class="control-label">Category A</label>
    <ui-select name="Acat" ng-model="model.a">
        ...
    </ui-select>
</div>
<div class="form-group" ng-show="!!model.a && model.all != 'Option Z'">
    <label class="control-label">Category B</label>
    <ui-select name="Bcat" ng-model="model.b" >
        ...
    </ui-select>
</div>

这里是控制器位：

$scope.onModelChange = function(){
    if ($scope.model.all) {
        $scope.model.z = "";
        $scope.model.a = "";
        $scope.model.b = "";
    }
};

angularjs ng-显示多个 div 并清除未选择的模型值

angularjs ng-show multiple divs and clean unselected model values

html

javascript

angularjs

ng-show

angular-ng-if

更新：