Как добавить динамический идентификатор на div на основе значения выбранного параметра выпадающего в angularjs onchange

Question

Здесь у меня есть поле выбора, замена раскрывающегося списка. Мне нужно добавить динамический идентификатор для div на основе значения выбранной опции раскрывающегося списка. Я упомянул в предупреждении, какой идентификатор должен быть добавлен на обмен. Вот код ниже

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>

Сценарий

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');
   }

}
});

Answer 1

  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/

Answer 2

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>

Answer 3

Вы можете сделать это в своем HTML:

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

И вы можете сделать это в вашей функции update():

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

}