角度添加到收藏夹

Question

我有一个项目列表，每个项目上都有一个按钮，可以单击“添加到收藏夹”，然后将一个变量设置为true，并启用一个类。

在我的控制器中，我设置了$ scope.isFavourite = false-单击按钮时，我设置了$ scope.isFavourite = true

问题是页面上的所有项目都获得该类

此处的代码：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

您将要研究Angular组件（可以在此处找到一些文档。基本上，一个组件是具有自己作用域的可重用代码段，因此对一个组件所做的更改不会影响其他组件。我会去更详细，但我不像Angular 2一样了解Angular。

Answer 2

通过使用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;
                }
            }
        ]
    });

工作钻头：

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