如何在angularjs中获取下拉列表的选定选项值并动态更改div id onchange of dropdown答案

【问题标题】：How to get selected option value of dropdown in angularjs and change the div id dynamically onchange of dropdown如何在angularjs中获取下拉列表的选定选项值并动态更改div id onchange of dropdown
【发布时间】：2019-06-05 17:47:56
【问题描述】：

我正在使用 angularjs。我有一个选择框和来自 ng repeat 的 div。在更改选择框时，我需要动态更改 div id。例如。如果我的选项选择值是城市，那么 div id 将再次为 {{y.city}} 如果我的选项选择值是 state，那么 div id 将是 {{y.state}}。只是为了显示，我把 id="{ {y.state}}”在 div 中。谁能帮帮我，这是下面的代码。

HTML

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

脚本

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.details = [{"city":"city1","id":"1","state":"state1","country":"country1"},{"city":"city2","id":"2","state":"state2","country":"country2"},{"city":"city3","id":"3","state":"state3","country":"country3"}];
  console.log($scope.details[0].city);
  $scope.update = function() { 
   if($scope.x == 'city'){
   alert('this is city');
   }
   if($scope.x == 'state'){
   alert('this is state');
   }
   if($scope.x == 'country'){
   alert('this is city');
   }

}
});

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

修正错字vlaue -> value

您的代码将是：

<div ng-repeat="y in details" id="{{ y[x] }}">
    {{y[x]}}
</div>

http://embed.plnkr.co/7W830qHem09Xr8Iw2siG

【讨论】：

您能用新的无效解决方案更新问题吗？
这里首先我需要在下拉菜单的更改中获取所选选项的值，然后如果我选择的值是城市，那么会自动将一个 id {{y.city}} 添加到 div 中，如果我选择的值是 state 然后自动将一个 id {{y.state}} 添加到 div