angularjs ng-show multiple divs and clean unselected model values

Question

angularjs ng-show multiple divs and clean unselected model values

565 views Asked by passion At 25 December 2016 at 15:13

I have input field with dropdown values: A, B, ... Z, referred to as ng-model=model.all.
I want to ng-show another <div> if the value of ng-model=model.all is equal to Option Z. This part is working fine. But the question is:

How can I show the Acat <div> ONLY if any other value except Option Z is chosen from the first one? I tried ng-show="model.all != 'Option Z' , but it shows the <div> even when nothing is selected. It just need to show the other div ONLY IF something other than Option Z is selected.

As you can see, my Bcat is shown only if the Acat is not empty, which is alright.
But, if I change my selection in the first one and choose Option Z, then the other two divs still hold their values, so the goal is to clean them if Option Z is selected, and vice versa, if something else is selected and accordingly, the other divs are populated with values, and if user decides to change the selection and choose Option Z then those values in previous divs should be cleaned as well.

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

update:

just a short note to add after Mosh Feu's answer:
As you can see here in screenshot https://i.stack.imgur.com/z9mYH.jpg , this should never happen.
Either, I pass the
{"all": "Option Z", "z": "Option Z1"}
or
{"all": "Option A", "a": "Option A1", "b": "Option B1"} .
This is not accepted:
{"all": "Option A", "a": "Option A1", "b": "Option B1", "z": "null"}
nor this one :
{"all": "Option Z", "z": "Option Z1", "a": "null", "b": "null"}.

Original Q&A

There are 4 answers

Ashish Joshi On 25 December 2016 at 15:44

May this will help you you have just to need add ng-change with your select form

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

Mosh Feu On 25 December 2016 at 15:45

If I understand you correctly, you need to check if model.all is selected and it's not equals to Option Z. If so, the check is simple:

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

About the second part. When the select changed and the value is Option Z just set the a and the b to null (See it in the code).

I hope that I answered you on all the pieces but if not, let me know.

Note: You can also see the model in the 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>

digit On 25 December 2016 at 15:46

You can use ng-change event and ng-if. Refer below

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 Controller

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

**Marcel** · Accepted Answer · 2016-12-25 23:09:31

this might work for you:

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

and here is the controller bit:

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

TechQA.

angularjs ng-show multiple divs and clean unselected model values

update:

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ANGULARJS

Related Questions in NG-SHOW

Related Questions in ANGULAR-NG-IF

Popular Questions

Popular Tags

Trending Questions