角のあるお気に入りに追加

Question

私はアイテムのリストを持っており、各アイテムには「お気に入りに追加」をクリックして、変数をtrueに設定してクラスを有効にする必要があります。

私のコントローラで

は、私は$ scope.isFavourite = falseを設定している - ]ボタンをクリックすると、私は本当の$ scope.isFavourite =設定

これに伴う問題は、ページ上のすべての項目がクラスを取得することです

コードは HTML：

<button ng-click="addToFav()" ng-class="{'active' : isFavourite}"><i class="ion-heart"></i> Netto</button> 

そして、私のコントローラで：

$scope.addToFav = function() { 
$ionicPopup.show({ 
    title: 'Tilføj til favoritter', 
    subTitle: 'Ønsker du at tilføje denne butik til dine favoritter?', 
    scope: $scope, 
    buttons: [ 
    { text: 'Nej' }, 
    { 
     text: '<b>Ja</b>', 
     type: 'button-positive', 
     onTap: function(e) { 
     $scope.isFavourite = true; 
     } 
    } 
    ] 
}); 

};

クリックすると、クリックしたボタンには分かれず、代わりにグローバルレベルで表示されるため、リスト内のすべてのボタンがclass = "active"になります私がクリックしたボタンでなければなりません

Answer 1

scope: $scopeを使用すると、コントローラースコープをアンロードするので、すべてのポップアップが同じ変数を共有します。isFavouriteあなたはこのような何かを行うことができ

：

<div ng-repeat="item in items"> 
    <button ng-click="addToFav(item)" ng-class="{'active' : item.isFavourite}"><i class="ion-heart"></i> Netto</button> 
</div> 

コントローラ：

$scope.addToFav = function (item) { 
    $ionicPopup.show({ 
     title: 'Tilføj til favoritter', 
     subTitle: 'Ønsker du at tilføje denne butik til dine favoritter?', 
     scope: $scope, 
     buttons: [ 
      { text: 'Nej' }, 
      { text: '<b>Ja</b>', 
       type: 'button-positive', 
       onTap: function(e) { 
        item.isFavourite = true; 
       } 
      } 
     ] 
    }); 

の作業plunker：

http://codepen.io/kbkb/pen/ONzgBQ?editors=1111

Answer 2

あなたはAngular Componentsを調べたいと思っています（いくつかのドキュメントはhereです）。基本的にコンポーネントは、独自のスコープを持つ再利用可能なコードです。 1つのコンポーネントは他のコンポーネントに影響を与えませんが、詳細についてはわかりますが、AngularとAngularは分かりません。