ng-repeatの外側に新しい範囲を作成する

Question

テキストの横にあるボタンを押すと、テキストのリストをどのように変更できるかが考えられます。また、リストの外にあるタイトルテキストにも適用できます。

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"; 
     }; 
    }); 

私はそれを正しい方法を書いたかはわかりません。しかし、タイトルだけを編集しようとしているタイトルの編集ボタンを除いて、すべてうまくいきます。子供のスコープ内にあるすべてのテキストが誤って編集されます。

私がしようとしているのは、スコープの親ではないため、ボタンが他のテキストに影響を与えないように、タイトルを新しいスコープにすることです。

Answer 1

なぜng-repeatに別の変数名を使用しないでください（私は2番目のテキスト=> txtにしました）。リストとテキストを更新するための別々の機能を持っている方が良いことですが、あなたがしたい場合、あなたは

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

を試すことができますビューには、配列要素の$インデックスを渡している。

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

Answer 2

うん、あなたは何をしようとしています：

{{text}}変数は同じコントローラスコープにバインドされています。編集ボタンを押すだけでその値が更新され、どこでも変更できます。

Answer 3

$ scope.listの値を更新してください。 範囲を更新すると、htmlがレンダリングされます。

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

デモを確認してください：あなたが作成することができ http://jsfiddle.net/Lvc0u55v/7050/

Answer 4

をあなたは新しいスコープを得るように「が含まれる」NG-テンプレートと組み合わせます。

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>