javascript - 如何根据AngularJS onchange中下拉列表的选定选项的值在div上添加动态ID

Question

这里我有选择框，在下拉列表的更改时我需要根据下拉列表所选选项的值在div上添加动态id。我在警报中提到了要在更改时添加什么id。下面是代码

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

您可以在 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';
   }

}