Erstellen Sie einen neuen Bereich außerhalb ng-repeat

Question

Die Idee ist, wie eine Liste von Texten durch Drücken der Taste neben dem Text geändert werden kann. Wir können es auch auf den Titeltext anwenden, der außerhalb der Liste liegt.

HTML:

<div ng-controller="TextController"> 
    <div class="title"> 
     <span>{{ text }}</span> 
     <button ng-click="edit()">Edit</button> 
    </div> 

    <ul> 
     <li ng-repeat="text in list"> 
      <span>{{ text }}</span> 
      <button ng-click="edit()">Edit</button> 
     </li> 
    </ul> 
</div> 

JavaScript:

angular.module("app"). 
    controller("TextController", function($scope) { 
     $scope.text = "hello"; 
     $scope.list = [....]; // list of texts; 

     $scope.edit = function() { 
      this.text += " world"; 
     }; 
    }); 

Ich bin mir nicht sicher, ob ich es richtig geschrieben haben. Es funktioniert jedoch alles außer der Bearbeitungsschaltfläche im Titel, bei dem ich versuche, nur den Titel zu bearbeiten. Dabei wird versehentlich der gesamte Text bearbeitet, der sich in seinem untergeordneten Bereich befindet.

Ich versuche, dem Titel einen neuen Bereich zu geben, so dass die Schaltfläche keinen Einfluss auf andere Texte hat, da sie kein übergeordneter Bereich ist.

Answer 1

Warum verwenden Sie nicht einen anderen Variablennamen für ng-repeat (ich habe zweiten Text => txt). Es ist besser, getrennte Funktionen für die Aktualisierung Liste und Text zu haben, aber wenn Sie möchten, können Sie

<div ng-controller="TextController"> 
    <div class="title"> 
     <span>{{ text }}</span> 
     <button ng-click="edit()">Edit</button> 
    </div> 

    <ul> 
     <li ng-repeat="txt in list"> 
      <span>{{ txt }}</span> 
      <button ng-click="edit($index)">Edit</button> 
     </li> 
    </ul> 
</div> 

Die Ansicht ist vorbei $ Index des Array-Elements versuchen:

$scope.edit = function(listIndex) { 
     if(listIndex) $scope.list[listIndex] += " world" 
     else $scope.text += " world"; 
    }; 

Answer 2

Ja Was Sie sind zu tun ist richtig:

Die {{text}} Variable ist an den gleichen Controller-Bereich gebunden. so die Schaltfläche Bearbeiten aktualisiert nur diesen Wert, der es überall zu ändern macht

Answer 3

Sie sollten versuchen, $ scope.list Wert zu aktualisieren: Wenn Sie den Bereich aktualisiert, wird das HTML rendern.

$scope.edit = function() { 
    $scope.list[this.$index] += " world"; 
}; 

Bitte überprüfen Sie die Demo: http://jsfiddle.net/Lvc0u55v/7050/

Answer 4

Sie könnten ein "include" mit einer ng-Vorlage kombiniert erstellen, damit Sie einen neuen Bereich bekommen.

http://jsfiddle.net/pfeq0mwe/3/

<div ng-app="myApp" ng-controller="myCtrl"> 

<div ng-include src="'myTemplate.htm'"> 

</div> 

    <ul> 
     <li ng-repeat="text in list"> 
      <span>{{ text }}</span> 
      <button ng-click="edit()">Edit</button> 
     </li> 
    </ul> 


    <script type = "text/ng-template" id = "myTemplate.htm"> 
    <div class="title"> 
     <span>{{ text }}</span> 
     <button ng-click="edit()">Edit</button> 
    </div> 
    </script> 

</div> 

<div > 

</div>