下拉菜单更改另一个 div 中的文本答案

【问题标题】：Dropdown menu changing text in another div下拉菜单更改另一个 div 中的文本
【发布时间】：2017-12-22 19:12:24
【问题描述】：

我正在尝试在一个div内创建一个下拉菜单，并在选择一个选项时，它更改另一个div内的文本。到目前为止，我只能使用 angularJS 让它在同一个 div 中工作。我该如何解决？我应该使用不同的技术吗？

头：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

正文：

<div ng-app="dominant" ng-controller="Ctrldominant">

<select ng-model="dominantie">
<option ng-repeat="x in dominantie1" value="{{x.model}}">{{x.model}}</option>
</select>

<p><span id="dominantie-p">{{dominantie}}</span></p>

</div>

<script>
var app = angular.module('dominant', []);
app.controller('Ctrldominant', function($scope) {
    $scope.dominantie1 = [
        {model : "Rechts-dominant"},
        {model : "Links-dominant"},
        {model : "Co-dominant"}
    ];
});
</script>

【问题讨论】：

标签： angularjs dropdown

【解决方案1】：

您必须将 Controller 指定给父元素。由于控制器指令被添加到<body>，它适用于两个div。

<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </head>
   <body ng-app="dominant" ng-controller="Ctrldominant">
      <div>
         <select ng-model="dominantie">
            <option ng-repeat="x in dominantie1" value="{{x.model}}">{{x.model}}</option>
         </select>
         <select ng-model="dominantie2">
            <option ng-repeat="x in dominantie1" value="{{x.model}}" >{{x.model}}</option>
         </select>
         <p><span id="dominantie-p">{{dominantie}}</span></p>
      </div>
      <div>
         <p>Second Div: 
            <span id="dominantie-d">{{dominantie}}</span>
            {{dominantie2}}
         </p>
      </div>
      <script>
         var app = angular.module('dominant', []);
         app.controller('Ctrldominant', function($scope) {
            $scope.dominantie1 = [
                {model : "Rechts-dominant"},
                {model : "Links-dominant"},
                {model : "Co-dominant"}
            ];
          });
      </script>
    </body>
</html>

【讨论】：

感谢您的回复@Saravanan Sachi。您的解决方案有效，但是如果我想在第一个 div 中有多个下拉菜单，在第二个 div 中有多个文本更改，我想我会遇到问题，因为我不能在中放置多个控制器。您对此有解决方案吗？
修改了同一控制器中两个下拉菜单的代码。每个下拉菜单都有单独的控制器有什么具体原因吗？
没有具体原因。我想要实现的是 2 个（或更多）具有不同内容的下拉菜单，它们会更改网站另一部分上的不同文本。所以第一个下拉列表是（rechts-dominant, links-dominant, co-dominant），第二个可能是（apple, pear, orange）。他们将控制不同的文本。这可能是您上一个代码的一个小调整，我希望我现在更清楚了。非常感谢