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

【问题标题】：angularjs ng-show multiple divs and clean unselected model valuesangularjs ng-显示多个 div 并清除未选择的模型值
【发布时间】：2016-12-25 15:13:44
【问题描述】：

我有一个带有下拉值的输入字段：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> 。只有在选择除选项z 以外的东西时，才需要显示另一个div。

如您所见，我的 Bcat 仅在 Acat 不为空时才显示，这没关系。
但是，如果我在第一个中更改我的选择并且选择 Option Z，那么其他两个 div 仍然保持它们的值，所以目标是在选择 Option Z 时清除它们，反之亦然，如果选择了其他东西相应地，其他 div 填充了值，如果用户决定更改选择并选择 Option 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"}.

【问题讨论】：

标签： javascript html angularjs ng-show angular-ng-if

【解决方案1】：

这可能对你有用：

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

【讨论】：

【解决方案2】：

您可以使用 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;
    }
}

【讨论】：

【解决方案3】：

这可能会帮助您只需要在您的选择表单中添加 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>

【讨论】：

【解决方案4】：

如果我理解正确，您需要检查是否选择了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>

【讨论】：

感谢您的回答。但是是否可以不将 null 值传递给未选择的选项。顺便说一句，代码中存在严重错误，正如您可能猜到的那样，这是截图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"}，我希望这很清楚。