Dropdown-Menü Ändern von Text in einem anderen div

Ich versuche, ein Dropdown-Menü innerhalb eines div zu erstellen, und wenn Sie eine Option auswählen, ändert Text in einem anderen div. Bis jetzt kann ich es nur innerhalb desselben Div mit angularJS arbeiten lassen. Wie behebe ich das? Sollte ich eine andere Technik verwenden?Dropdown-Menü Ändern von Text in einem anderen div

Kopf:

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

Körper:

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

Quelle

2017-12-22 Bart S

Sie haben Regler auf das übergeordnete Element zu spezifizieren. Da die Controller-Richtlinie zu <body> hinzugefügt wird, ist sie auf beide Divs anwendbar.

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

Quelle

2017-12-22 19:55:47

Vielen Dank für Ihre Antwort @Saravanan Sachi. Deine Lösung funktioniert, aber wenn ich mehrere dropdowns in der ersten div und mehrere textchanges in der zweiten div wollte, denke ich, dass ich ein Problem haben werde, da ich nicht mehrere Controller in die setzen kann. Hast du eine Lösung dafür? –

Der Code für zwei Dropdowns in demselben Controller wurde geändert. Gibt es einen bestimmten Grund, separate Controller für jedes Dropdown zu haben? –

Kein spezifischer Grund. Was ich versuche zu erreichen, ist 2 (oder mehr) Dropdowns mit verschiedenen Inhalten, und sie ändern verschiedene Teile des Textes auf einem anderen Stück der Website. So ist das erste Dropdown (rechts-dominant, links-dominant, co-dominant) und das zweite könnte (Apfel, Birne, Orange) sein. Sie würden verschiedene Textteile kontrollieren. Es ist wahrscheinlich eine kleine Anpassung von Ihrem letzten Code, ich hoffe, ich bin jetzt klarer. Danke vielmals –

Dropdown-Menü Ändern von Text in einem anderen div

Antwort

Verwandte Themen