ngRepeat에서 하나의 요소 만 변경하십시오.

Question

나는 반복을 가지고 있습니다. 그리고 그 요소의 클래스와 전체 그룹의 클래스를 변경하고 싶습니다.

내 ng-click에 위의 HTML과

<button ng-class="defaultClass" ng-repeat="tube in node.Tubes" ng-click="toggleBtn(tube)">{{"Tube " + ($index + 1)}}</button> 

난 내가 요소의 클래스 이름을 $$watchers라고 볼 console.log(this) 경우 정말 만 나에게 API에서 전달 된 데이터를 제공하는 관을 통과 할 수 있지만 그에게 이상한 것 같다 거기서 바꾸세요. 내 컨트롤러에서

$scope.toggleBtn = function (element) { 
    console.log(element); 
    console.log(this); 
} 

나는 $scope.defaultClass = "btn btn-off"; 가지고 있지만 나는 기능은 모든 요소를 ​​변경하는 것으로 변경합니다.

어떻게 클릭 한 요소의 클래스 만 변경할 수 있습니까?

Answer 1

의견에서 계속. 당신이 말했듯이, 당신은 $ scope 변수를 사용할 수 없기 때문에 동일합니다. 이 문제를 해결하려면 ng-class를 올바르게 사용해야합니다. 문서 : https://docs.angularjs.org/api/ng/directive/ngClass이 (페이지 하단의 예를 참조)

<button ng-class="{'btn-on' : tube.toggled, 'btn-off' : !tube.toggled}" ng-repeat="tube in node.Tubes" ng-click="toggleBtn(tube)">{{"Tube " + ($index + 1)}}</button> 

http://plnkr.co/edit/WKLJ45yRYu1583C2ZnfT?p=preview

Answer 2

내가 만약 당신이 원하는 경우 이해 모르겠지만, 당신이 사용할 수 있습니다

<button class="btn" ng-repeat="tube in node.Tubes" ng-class="{'btn-off':!toggled, 'btn-on':toggled}" ng-click="toggled = !toggled">{{"Tube " + ($index + 1)}}</button> 

이 경우 컨트롤러에 코드를 추가 할 필요가 없습니다.

Answer 3

다른 답변은 우수합니다. 그러나, 나는 이것을위한 다른 방법을 지적하고 싶다. 영수증 배열을 반복하고 있다고 가정 해 봅시다.

$scope.receipts = [ ... ]; 

그리고

프런트 엔드에 당신이 영수증을 통해 반복했다 : 독특한 클래스로 추적 할 수

<div ng-repeat="receipt in receipts">{{ receipt.[attribute] }}</div> 

한 가지 방법 것은 추가하는 것입니다 예를 들어, 컨트롤러는 범위에서 영수증을했다 영수증 객체에 대한 "클래스"키.

프런트 엔드에

receipt { 'id': '1', 'class' : ' ... ' } 

, 당신은 NG-클래스 사용하여 클래스를 결정하는 것입니다 : 같은 예를 들어 영수증이 보일 것이다

<div ng-repeat="receipt in receipts"> 
    <div ng-class="receipt.class"></div> 
</div> 

그 다음을, 당신은 영수증과 그것의 ID를 전달할 수 그래서 같은 ToggleButton을() 메소드 :

이

<div ng-repeat="receipt in receipts"> 
    <div class="btn" ng-click="toggleClass(receipt.id)"></div> 
    <div ng-class="receipt.class"></div> 
</div> 

그리고 컨트롤러 내에서 단순히 특정 영수증의 클래스를 업데이트 할 수는 (배열 $ 범위에서 영수증을 얻는 방법 getReceipt은()가 여기에 가정 .receipts) :

$scope.toggleClass = function(id) { 
    getReceipt(id).class = { ... } 
} 

이 동적으로 toggleClass() 함수 내 논리를 기반으로하는 단일 영수증의 클래스를 변경합니다.