Question

我正在尝试在一个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>

Answer 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>

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

1 个答案: