Show/Hide div depend on dropdown select in AngularJS with default value

Question

I am new to Angularjs. I have tired show & hide div using dropdown select and it is working. But I don't have idea to show the default values.

Requirement : Initial stage I have to display the first option in the dropdown and show the respective div

HTML :

<div ng-app="myApp" ng-controller="MyCtrl">
   <select name="name" ng-model="region.name" ng-dropdown required ng-change="changeme()"
     <option ng-option value="us" selected="selected">us</option>
     <option ng-option value="uk">uk</option>
   </select>
  <div id="one" ng-if="region.name == 'us'"> US based event</div>
  <div id="two" ng-if="region.name == 'uk'"> UK based event</div>
</div>

JS:

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $window, $element) {
  $scope.changeme = function() {
        //no code
  }

});

Ref code: jsfiddle

Blue · Accepted Answer · 2017-06-30 03:20:54Z

1

To set default values, simply assign them in your controller:

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $window, $element) {
  $scope.region.name = 'uk';

});

See updated jsfiddle here.

To answer your section question, the reason why it's not working is because you haven't actually initialed the object anywhere. When your code attempts to access region.name, region has not yes been defined, and causes the ng-if statement to no longer attempt to validate. To solve this, initialize the full object at the start:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $window, $element) {
  $scope.region = {
    name: 'us'
  };
});

See updated jsfiddle here.

edited Jun 30, 2017 at 3:20

answered Jun 30, 2017 at 2:44

Blue

23k7 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RAN Over a year ago

Thank you for the reply. But I have to display the corresponding div also.

RAN Over a year ago

Thank you, it's working. Can we have the name value as dynamic ?

Blue Over a year ago

What do you mean by that?

Luke Villanueva · Accepted Answer · 2017-06-30 02:46:24Z

0

When you bind a scope variable into a select, it looks for the options that it contains.

On your code, $scope.region.name is empty or undefined, thus it doesn't match any of your defined options.

You can set the default value on your controller for ex:

$scope.region.name = "us"

The select now knows what is selected on load.

answered Jun 30, 2017 at 2:46

Luke Villanueva

2,07010 gold badges46 silver badges96 bronze badges

1 Comment

RAN Over a year ago

Thank you for the reply. Here I have to display the corresponding div also. And the region value (us) is dynamic.

Collectives™ on Stack Overflow

Show/Hide div depend on dropdown select in AngularJS with default value

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related