Angularjs將切換功能僅應用於ng-repeat內部的點擊按鈕

Question

我創建了此fiddle專門用於解決我的問題。我是ng-repeat某些部分。我有一個切換功能可以在裏面實現。但是，當我單擊按鈕時，所有重複項目都會觸發函數。這在沒有使用ng-repeat時工作正常，儘管在點擊時使用相同的函數名稱。以下是代碼。我想有一些像this運營商，我可以在這裏使用。到目前爲止我的代碼（我創造了這個爲小提琴而不是原來的），

HTML

<div ng-app="app"> 
    <div ng-controller="CommentController"> 
     <div ng-repeat="list in lists"> 
      <button ng-click="showDiv()" class="review">{{lists[$index]}}</button> 
      <div ng-show="hiddenDiv">This is the div to be toggled on clicking any of the above button. And they do so as they make use of <i>same function on click.</i> 

      </div> 
     </div> 
    </div> 
</div> 

控制器

var app = angular.module('app', []); 

app.controller('CommentController', function ($scope) { 
    $scope.hiddenDiv = true; 
    $scope.showDiv = function() { 
     $scope.hiddenDiv = !$scope.hiddenDiv; 
    }; 
    $scope.lists = ["one", "two", "three", "four", "five"]; 
}); 

Answer 1

如果你需要塌陷根據一個特定的重複點擊按鈕嘗試以下，

修改按鈕爲

<button ng-click="hiddenDiv = !hiddenDiv" class="review">{{lists[$index]}}</button> 

和從控制器移除$scope.showDiv功能

DEMO FIDDLE

---

說明

如果你使用像，

<button ng-click="showDiv()" class="review">{{lists[$index]}}</button> 

當點擊按鈕將觸發控制器的$scope.showDiv功能，並在該功能$scope.hiddenDiv屬性將切換，並且請注意$ scope.hiddenDiv將對整個控制器可見，這意味着它對於所有控制器範圍通用，所以如果你更改一次其使用屬性將改變所有其他的事情，

但如果使用

<button ng-click="hiddenDiv = !hiddenDiv" class="review">{{lists[$index]}}</button> 

然後會有一個hiddenDiv財產爲每一個重複，因爲ng-repeat是創建一個子範圍（DOC）。所以對於一個特定的重複有一個單獨的hiddenDiv屬性，並且對於其他人而言對於相關重複是不可見的。

---

，如果你使用你的使用myData.hiddenDiv代替hiddenDiv， 在這種情況下角

<button ng-click="myData.hiddenDiv = !myData.hiddenDiv" class="review">{{lists[$index]}}</button> 

說明將在ng-repeat子範圍檢查myData對象的hiddenDiv財產與再角度意識到有在子範圍內沒有任何名爲myData的東西，然後它將在父範圍中搜索它，並且在那裏實現屬性並且該屬性對於所有重複使用功能如showDiv()。但如果你使用hiddenDiv而沒有角度將在ng-repeat子作用域中搜索它，並在實現在子作用域中缺少hiddenDiv之後創建新的子作用域變量。

請參閱Prototypal Inheritance。有一個很好的描述here。

，並請this描述過

Answer 2

您還可以使用，而不是單個變量數組並通過指數函數調用，這樣就不會在觸發一個動作每一件事情。

<div ng-app="app"> 
<div ng-controller="CommentController"> 
    <div ng-repeat="list in lists"> 
     <button ng-click="showDiv($index)" class="review">{{lists[$index]}}</button> 
     <div ng-show="!hiddenDiv[$index]">This is the div to be toggled on clicking any of the above button. And they do so as they make use of <i>same function on click.</i> 
     <input type="text" ng-model="textModel[$index]"/>{{textModel[$index]}} 
     </div> 
    </div> 
</div> 

的控制器

var app = angular.module('app', []); 

app.controller('CommentController', function ($scope) { 
$scope.hiddenDiv=[]; 
$scope.textModel=[]; 
$scope.showDiv = function (index) { 
    $scope.hiddenDiv[index] = !$scope.hiddenDiv[index]; 
    $scope.textModel[index]=null; 
}; 
$scope.lists = ["one", "two", "three", "four", "five"]; 
}); 

http://jsfiddle.net/paje007/85vp9zme/6/

這樣，如果要執行的功能，任何操作，你可以做到這一點也像小提琴。這裏我正在清除隱藏文本輸入。