CODEWITHSUNDEEP
javascriptangularjs
mayank bisht
mayank bisht

Reputation: 874

Unable to retrieve dropdown ng-model value using ng-if, in Angular Js

I have 3 dropdowns.Dropdown first will control, out of Dropdown 2 & Dropdown 3 which dropdown to populate.

I am doing this using ng-if, I am able to use ng-if with the second dropdown, but when I unable to use ng-if with the third dropdown.

Reason I figured out is, dropdown 2 is not binding any value with it.

I don't know why this is happening.

code

<select ng-model="selcetedValue">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
<select ng-model="selcetedValueSecond" ng-if="selcetedValue === 'B'">
  <option value="E">E</option>
  <option value="F">F</option>
  <option value="G">G</option>
  <option value="H">H</option>
</select>
<select ng-model="selcetedValueThird" ng-if="selcetedValueSecond === 'H'">
  <option value="I">I</option>
  <option value="J">J</option>
  <option value="K">K</option>
  <option value="L">L</option>
</select>

<p>Selected value from first dropdown:: <i>{{selcetedValue}}</i></p>
<p>Selected value from second dropdown:: <i>{{selcetedValueSecond}}</i></p>


Please help.

Upvotes: 1

Views: 3459

Answers (5)

Satpal
Satpal

Reputation: 133403

ngIf creates its own scope, You should define an object in $scope then use that to bind ngModel with select elements.

$scope.selectValues ={};

Then use it in view 

<select ng-model="selectValues.selcetedValue">
</select>
<select ng-model="selectValues.selcetedValueSecond" ng-if="selectValues.selcetedValue === 'B'">
</select>
<select ng-model="selectValues.selcetedValueThird" ng-if="selectValues.selcetedValueSecond === 'H'">
</select>


var app = angular.module("app", []);
app.controller("myCtrl", function($scope, $filter, $sce) {
  $scope.selectValues = {};
});
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head>

<body ng-controller="myCtrl">
  <select ng-model="selectValues.selcetedValue">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
  <select ng-model="selectValues.selcetedValueSecond" ng-if="selectValues.selcetedValue === 'B'">
  <option value="E">E</option>
  <option value="F">F</option>
  <option value="G">G</option>
  <option value="H">H</option>
</select>
  <select ng-model="selectValues.selcetedValueThird" ng-if="selectValues.selcetedValueSecond === 'H'">
  <option value="I">I</option>
  <option value="J">J</option>
  <option value="K">K</option>
  <option value="L">L</option>
</select>

  <p>Selected values <i>{{selectValues}}</i></p>
</body>

</html>

Upvotes: 3

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

You should use ng-show/hide instead of ng-if, because of your second dropdown DOM is not in the current scope if you using ng-if. So the third dropdown ng-if does not knows which scope value is assigned in there expression.

ngIf

The ngIf directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. Read this discussion for more details; what is the difference between ng-if and ng-show/ng-hide

angular.module("aaa",[]).controller("ccc",function($scope)
{
$scope.selcetedValue="";
$scope.selcetedValueSecond="";
$scope.selcetedValueThird="";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="aaa" ng-controller="ccc">

<select ng-model="selcetedValue">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
<select ng-model="selcetedValueSecond" ng-show="selcetedValue === 'B'">
  <option value="E">E</option>
  <option value="F">F</option>
  <option value="G">G</option>
  <option value="H">H</option>
</select>
<select ng-model="selcetedValueThird" ng-show="selcetedValueSecond === 'H'">
  <option value="I">I</option>
  <option value="J">J</option>
  <option value="K">K</option>
  <option value="L">L</option>
</select>

<p>Selected value from first dropdown:: <i>{{selcetedValue}}</i></p>
<p>Selected value from second dropdown:: <i>{{selcetedValueSecond}}</i></p>

</div>

Upvotes: 2

Vivz
Vivz

Reputation: 6620

ng-if will create its own child scope. So your ng-model values are not directly binded to the controllers scope. You can use controller as syntax to avoid it. Other solution is to bind your ng-model to an object. controller as syntax is more preferred as it will implicitly take care of the Dot Rule.

var app = angular.module("app", []);
 app.controller("myCtrl", function() {
   var vm =this;
 });
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head>
<body ng-controller="myCtrl as vm">
<select ng-model="vm.selcetedValue">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
<select ng-model="vm.selcetedValueSecond" ng-if="vm.selcetedValue === 'B'">
  <option value="E">E</option>
  <option value="F">F</option>
  <option value="G">G</option>
  <option value="H">H</option>
</select>
<select ng-model="vm.selcetedValueThird" ng-if="vm.selcetedValueSecond === 'H'">
  <option value="I">I</option>
  <option value="J">J</option>
  <option value="K">K</option>
  <option value="L">L</option>
</select>

<p>Selected value from first dropdown:: <i>{{vm.selcetedValue}}</i></p>
<p>Selected value from second dropdown:: <i>{{vm.selcetedValueSecond}}</i></p>
<p>Selected value from third dropdown:: <i>{{vm.selcetedValueThird}}</i></p>
</body>
</html>

For more Info: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Upvotes: 5

Rakesh Chand
Rakesh Chand

Reputation: 3113

Use ng-show/ng-hide instead

<select ng-model="selcetedValue">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
<select ng-model="selcetedValueSecond" ng-show="selcetedValue === 'B'">
  <option value="E">E</option>
  <option value="F">F</option>
  <option value="G">G</option>
  <option value="H">H</option>
</select>
<select ng-model="selcetedValueThird" ng-show="selcetedValueSecond === 'H'">
  <option value="I">I</option>
  <option value="J">J</option>
  <option value="K">K</option>
  <option value="L">L</option>
</select>

<p>Selected value from first dropdown:: <i>{{selcetedValue}}</i></p>
<p>Selected value from second dropdown:: <i>{{selcetedValueSecond}}</i></p>

See this JsFiddle

Upvotes: 1

Nitesh Rana
Nitesh Rana

Reputation: 512

You should use controller as syntax:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp">
<div ng-controller="myctrl as $ctrl">
<select ng-model="$ctrl.selcetedValue">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
<select ng-model="$ctrl.selcetedValueSecond" ng-if="$ctrl.selcetedValue === 'B'">
  <option value="E">E</option>
  <option value="F">F</option>
  <option value="G">G</option>
  <option value="H">H</option>
</select>
<select ng-model="$ctrl.selcetedValueThird" ng-if="$ctrl.selcetedValueSecond === 'H'">
  <option value="I">I</option>
  <option value="J">J</option>
  <option value="K">K</option>
  <option value="L">L</option>
</select>

<p>Selected value from first dropdown:: <i>{{$ctrl.selcetedValue}}</i></p>
<p>Selected value from second dropdown:: <i>{{$ctrl.selcetedValueSecond}}</i></p>

</div>
</div>
<script>
angular.module('myApp',[])
.controller('myctrl',function(){
})
</script>
</body>
</html>

Upvotes: 4

Related Questions