Angular JS ng-repeat 및 'this'

Question

저는 AngularJS에서 새로 도입되었지만 이전에 jQuery를 일부 사용했습니다. 클릭 한 요소를 얻는 방법을 이해하는 데 문제가 있습니다. 부모가 클릭 한 항목의 텍스트, 아이콘 또는 클래스를 변경하는 것과 같은 몇 가지 변경을 수행하는 것입니다.

간단한 HTML : 내가 무엇을 원하는

<ul ng-controller="basketCtrl"> 
    <li ng-repeat="item in item"> 
     <button ng-click="addToBasket(Itemid,this,whatever)"> 
      <i class="myBasketicon"> 
      <span>Buy now</span> 
     </button> 
    </li> 
</ul> 

: 정말 태그, 배열에서 NG-모델로 많은 철을 시도

$scope.addTobasket = function (id, elem, whatever){ 
    // to some JSON-Server-stuff - that works perfect 

    // now my problems, : 

    //change this -> myBasketIcon -> myOKicon 
    //change this -> span text Buy now-> Thanks for buying 
    // give the this -> li an class => 'changed' 

} 

... 웹 검색 반나절 ...하지만 내 문제와 일치하는 것을 찾지 못했습니다. 는 어쩌면 그렇게 도와주세요 ... 각 방법을하지 생각하는 단지 방법 : O) 함부르크

종류와 관련, 독일

티모

Answer 1

개체의 상태에 따라 결과를 변경하는 아이콘 클래스 및 텍스트의 메서드를 추가하거나 사용자 지정 지시문을 사용해야합니다. 당신은 분명히 당신이 jQuery로했던 것처럼 DOM 조작 (텍스트/클래스 변경 등)을하고 싶지는 않습니다. 방법 기반의 접근 방식에 대한

, 마크 업에 대해이 같은 :

<li ng-repeat="item in item"> 
    <button ng-click="addToBasket(item)"> 
     <i ng-class="getClass(item)"> 
     <span>{{getMessage(item)}}</span> 
    </button> 
</li> 

및 컨트롤러 :

.controller('ShoppingListCtrl', function($scope) { 
    $scope.getClass = function(item) { 
     return item.inBasket ? 'myOkIcon' : 'myBasketIcon'; 
    }; 

    $scope.getMessage = function(item) { 
     return item.inBasket ? 'Thanks for buying' : 'Buy now'; 
    }; 
}) 

이것은 또한 슈퍼는 사용자 정의 지시어와 함께 할 수 강력한 방법 (그리고 확실히 알아낼만한 가치가 있지만) 단지 시작하기에 과잉 일 수 있습니다. 이러한 종류의 일을 수행하는 메소드가 지시어와 함께 사용된다면 많이 추가하고있는 것을 알 수 있습니다.

Answer 2

당신은을 변경하여이 작업을 수행 할 수 있어야한다 ng-click 핸들러에서 요소에 액세스 할 필요가 없으며 해당 속성에서 ng-class 및 angle 바인딩을 사용할 필요가 없습니다.

<ul ng-controller="basketCtrl"> 
    <li ng-repeat="item in items" ng-class="{'changed': item.added}"> 
     <button ng-click="addToBasket(item)"> 
      <i ng-class="{'myBasketicon':!item.added,'myOKicon':item.added }"> 
      <span>{{item.added ? "Thanks for buying" : "Buy now"}}</span> 
     </button> 
    </li> 
</ul> 

하고 핸들러

그냥 수행

$scope.addTobasket = function (item){ 
    item.added = true; 
} 

대부분의 경우, 각 사용의 전체 목적은 DOM 조작을 방지하고 관리, 당신은 단지 모델/viewmodels와 바인딩 각도를 처리하도록하는 것입니다 .