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组件（可以找到一些文档here。基本上，组件是可重用的代码段，具有自己的范围，因此进行了更改一个组件不会影响其他组件。我会详细介绍，但我不知道Angular和Angular 2。

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

Angular添加到收藏夹

2 个答案: