Выпадающее меню, изменяющее текст в другом div

Я пытаюсь создать раскрывающееся меню внутри одного div, и при выборе параметра он меняет текст внутри другого div. Пока я могу заставить его работать только внутри одного и того же div, используя angularJS. Как это исправить? Должен ли я использовать другую технику?

глава:

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

dropdown angularjs
person Bart S    schedule 22.12.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны указать 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>
person Saravanan Sachi    schedule 22.12.2017
comment
Спасибо за ваш ответ @Saravanan Sachi. Ваше решение работает, однако, если бы я хотел несколько раскрывающихся списков в первом div и несколько изменений текста во втором div, я думаю, у меня возникнут проблемы, поскольку я не могу поместить несколько контроллеров в ‹body›. У вас есть решение для этого? - person Bart S; 22.12.2017
comment
Изменен код для двух раскрывающихся списков в одном контроллере. Есть ли конкретная причина иметь отдельные контроллеры для каждого раскрывающегося списка? - person Saravanan Sachi; 23.12.2017
comment
Нет конкретной причины. Чего я пытаюсь добиться, так это 2 (или более) выпадающих меню с разным содержимым, и они меняют разные фрагменты текста на другом фрагменте веб-сайта. Таким образом, первое выпадающее меню (rechts-dominant, links-dominant, co-dominant), а второе может быть (яблоко, груша, апельсин). Они будут контролировать разные фрагменты текста. Вероятно, это небольшая корректировка вашего последнего кода, надеюсь, теперь я более понятен. Большое спасибо - person Bart S; 28.12.2017