Angular添加到收藏夹

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

在我的控制，我给自己定$ scope.isFavourite =假的 - 当点击一个按钮，我设置了$ scope.isFavourite =真

这样做的问题是，网页上的所有项目获取类

这个代码： HTML：

而且在我的控制器：

$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”，只有它在哪里应该是我点击的按钮

来源

2016-04-07 nuffsaid

您是通过收藏夹阵列重复？ – Rob

现在，它只是静态内容，但后来数据来自web服务 – nuffsaid

这样的事情？他们也切换。 https://jsfiddle.net/tud0jk1d/ – Rob

通过使用scope: $scope您正在将范围设置为surro unding控制器范围，因此所有弹出窗口共享相同的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

来源

2016-04-07 19:47:33 kabaehr

你将要看看Angular Components（一些文档可以找到here。基本上，一个组件是一个可重用的代码片段，它有自己的作用域，一个组件不会影响其他组件，我会详细介绍，但我不知道Angular以及我做的Angular 2.

来源

2016-04-07 18:25:33 watzon

Angular添加到收藏夹

回答

相关问题