Açısal Favorilere ekle

Question

Öğelerin bir listesini aldım ve her öğenin üzerinde "Sık Kullanılanlara Ekle" yi tıklayabildiğim bir düğmem var ve sonra bir değişken true olarak ayarlanmalı ve bir sınıf etkinleştirilmelidir ..

benim denetleyicisi

, ben $ scope.isFavourite = false kurdum - bir düğmeyi tıklayarak zaman gerçek $ scope.isFavourite = set

bu sorun sayfasındaki tüm öğeleri sınıfını alır olduğunu

Buradaki kod: HTML:

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

Ve benim denetleyicisi:

$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; 
     } 
    } 
    ] 
}); 

};

Sorun, tıklatıldığında, tıklattığınız düğmeyle değil, genel bir düzeyde, bunun yerine listedeki her düğmenin class = "active" olduğu anlamına gelir; tıklattığım düğme

Answer 1

scope: $scope'u kullanarak kapsamı surro'ya ayarlıyorsunuz. unding denetleyici kapsamı, böylece tüm pop-up'larınız aynı isFavourite değişkenini paylaşıyor. Böyle bir şey yapabileceğini

:

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

kontrolör:

$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; 
       } 
      } 
     ] 
    }); 

Çalışma plunker:

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

Answer 2

Açısal Bileşenlere bakmak isteyeceksiniz (bazı belgeler here bulunabilir. Temel olarak bir bileşen, kendi kapsamı olan yeniden kullanılabilir bir kod parçasıdır. Bir bileşen diğerlerini etkilemez.Daha fazla ayrıntıya girerdim, ama açısal olarak bilmiyorum Angular 2.