角度添加到收藏夹

Angular add to favourites

本文关键字：收藏夹 添加      更新时间：2024-03-06

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

在我的控制器中，我设置了$scope.isFavourite=false-单击按钮时，我设置$scope.is Favourite=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"，它只应该是我点击过的按钮

通过使用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 Components（这里可以找到一些文档。基本上，组件是一段可重用的代码，有自己的范围，所以对一个组件的更改不会影响其他组件。我会详细介绍，但我对Angular的了解不如对Angular 2的了解。

相关文章：