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>

我想做的事：

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

}

我真的做了很多嘗試，例如在標簽，數組中使用ng-model ...半天在網上搜索...但沒有找到與我的問題相符的內容。 也許這只是思考的方式而不是棱角分明的方式...所以請幫助：O）

來自德國漢堡的盛情款待

蒂莫

Answer 1

您應該能夠通過更改屬性（角度方式），無需訪問ng-click處理程序中的元素以及對該屬性使用ng-class和angular綁定來做到這一點。

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

在大多數情況下，使用angular的全部目的是避免DOM操縱並讓angular管理它，您只需處理模型/視圖模型和綁定即可。

Answer 2

您應該為圖標類和文本添加方法，以根據對象的狀態更改其結果，或使用定制的自定義指令。 您絕對不希望像使用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';
    };
})

這也可以使用自定義指令來完成，這是一種超強大的處理方式（絕對值得弄清楚），但對於剛入門來說可能會過分殺傷。 如果您發現執行這些操作的方法與指令一起使用，則會增加很多。