how to add dynamic id on div based on the value of selected option of dropdown in angularjs onchange

Question

Here I have select box,onchange of dropdown I need to add dynamic id on div based on the value of selected option of dropdown .I have mentioned in alert what id to be add onchange.Here is the code below

html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div id=""></div>

script

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.update = function() { 
   if($scope.x == 'city'){
   alert('add id as city1 inside ablove div');
   }
   if($scope.x == 'state'){
   alert('add id as mystate inside ablove div');
   }
   if($scope.x == 'country'){
   alert('add id as mycountry inside ablove div');
   }

}
});

Thanks for your answer,Its resolved,now I want to add dynamic id inside div based on selected option onchange,I updated the code. — carreankush
– carreankush, Commented Jan 11, 2019 at 3:57

alpa_chino · Accepted Answer · 2019-01-11 04:21:01Z

0

You can do this in your HTML:

<div id="{{id}}"></div>

And you can do this in your update() function:

$scope.update = function() { 
   if($scope.x == 'city'){
       $scope.id = 'city1';
   } 
   if($scope.x == 'state'){
       $scope.id = 'mystate';
   }
   if($scope.x == 'country'){
       $scope.id = 'mycountry';
   }

}

edited Jan 11, 2019 at 4:21

answered Jan 11, 2019 at 3:46

alpa_chino

1538 bronze badges

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

2 Comments

quirimmo Over a year ago

This should be a comment

alpa_chino Over a year ago

I understand, but I don't have the ability to make a comment on OP's post, yet.

Paaarth · Accepted Answer · 2019-01-11 05:47:59Z

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.update = function() {
    if ($scope.x == 'city') {
        $scope.selectedValue = 'cityName';
    } else if ($scope.x == 'state') {
        $scope.selectedValue = 'stateName';
    } else if ($scope.x == 'country') {
        $scope.selectedValue = 'countryName';
    } else {
        $scope.selectedValue = '';
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
   <select class="change" ng-model="x" ng-change="update()">
      <option value="">Please Select</option>
      <option value="city">Cities</option>
      <option value="state">States</option>
      <option value="country">Countries</option>
   </select>
   <span ng-if="selectedValue">You have selected :- {{selectedValue}}</span>
</div>

S.Maneesh · Accepted Answer · 2019-01-11 03:48:45Z

  you need to use ngChange and pass ngModel object as argument to your ngChange function
    **Example:**
    <div ng-app="App" >
      <div ng-controller="ctrl">
        <select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" 
                data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
          <option value="">Select Account</option>
        </select>
        {{itemList}}     
      </div>       
    </div>
js:
function ctrl($scope) {
  $scope.itemList = [];
  $scope.blisterPackTemplates = [{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"}];

  $scope.changedValue = function(item) {
    $scope.itemList.push(item.name);
  }       
}
Live example: http://jsfiddle.net/choroshin/9w5XT/4/

Wrong. You don't need to pass the ngModel in the callback. It is already in the scope, that's useless to pas s it as argument

Collectives™ on Stack Overflow

how to add dynamic id on div based on the value of selected option of dropdown in angularjs onchange

html

script

3 Answers 3

2 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

html

script

3 Answers 3

2 Comments

Comments

1 Comment

Related