다른 div의 텍스트를 변경하는 드롭 다운 메뉴

하나의 div 안에 드롭 다운 메뉴를 만들려고하는데 옵션을 선택하면 다른 div의 텍스트가 변경됩니다. 지금까지 나는 angularJS를 사용하여 같은 div 안에서만 작업하도록했습니다. 이 문제를 어떻게 해결할 수 있습니까? 다른 기술을 사용해야합니까?다른 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>

출처

2017-12-22 Bart S

. 컨트롤러 지시문은 <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>

출처

2017-12-22 19:55:47

답장을 보내 주셔서 감사합니다. @Saravanan Sachi. 솔루션을 작동하지만 첫 번째 div에 여러 개의 드롭 다운이 필요하고 두 번째 div에 여러 개의 textchanges가 필요한 경우 에 여러 컨트롤러를 넣을 수 없어 문제가 발생한다고 생각합니다. 이 문제에 대한 해결책이 있습니까? –

동일한 컨트롤러에서 두 개의 드롭 다운 코드가 수정되었습니다. 각 드롭 다운마다 별도의 컨트롤러가있는 특별한 이유는 무엇입니까? –

특별한 이유가 없습니다. 내가 성취하고자하는 것은 서로 다른 콘텐츠를 가진 2 개 이상의 드롭 다운과 다른 웹 사이트에서 다른 텍스트를 변경하는 것입니다. 따라서 첫 번째 드롭 다운은 (rechts-dominant, links-dominant, co-dominant) 두 번째 드롭 다운 (apple, pear, orange)이 될 수 있습니다. 그들은 다른 텍스트를 제어 할 것입니다. 아마 마지막 코드에서 작은 조정 일 것입니다, 나는 더 명확 해 졌으면 좋겠습니다. 고마워. –

다른 div의 텍스트를 변경하는 드롭 다운 메뉴

답변

관련 문제