javascript - 如何在ng-repeat中切换特定的div元素？

我有产品列表，如果我单击一个产品，则需要将其添加到数据库中；如果我单击同一产品，则应将其从数据库中删除，这是我在wishlistFlag上切换ng-click的原因。在一个div元素上应该没问题，对于第二个div元素，它的工作方式与第一个div元素相反，我的意思是，如果添加了第一个产品，那么如果我单击第二个产品，则必须添加它，但它将删除第一个产品。

 <div class="hmpal-prprt-post-wdgt hmpal-prprt-wishlist">
    <a href="">
        <span class="prprt-icon"><i class="fa fa-heart" aria-hidden="true"
            ng-click="WishlistAdd($index,project.propertyId)"></i></span>
        <span>Wishlist</span>
    </a>
 </div>

在控制器代码里面，

a.WishlistAdd = function (index,propertyId) {

    a.wishlistFlag = !a.wishlistFlag;

    var data = {
        wishlistFlag:a.wishlistFlag,
        propertyId:propertyId
    };

    e.createWishLists(data).then(function (result) {
        alert("sucesss");
        alert(JSON.stringify(result));
    }, function (error) {
       alert("error");
       alert(JSON.stringify(error));
    });
}

如何为不同产品实现切换wishlistFlag。

最佳答案

由于您最多希望在愿望清单中选择一种产品，因此不必使用boolean标志，而是可以使用所选的产品ID（如果我对，则在代码中称为propertyId）。控制器中定义的selectedProductId变量，如果未选择任何产品，则为null；如果存在一个产品，则为product id。

通过检查当前选定的ID是否等于单击的ID来完成切换。

我认为


当wishListFlag === true在发送的数据中时，您要添加
propertyId标识的产品，否则，请删除
数据库中的产品。
添加产品时，服务器端
如果有现有产品，则实际替换所选产品。

// Is there a selected product ?
var selectedProductId = null;

a.WishlistAdd = function (index, propertyId) {

    selectedProductId = (selectedProductId === propertyId ? null : propertyId);

    var data = {
        wishlistFlag: (selectedProductId !== null),
        propertyId: propertyId
    };

    e.createWishLists(data).then(function (result) {
        alert("sucesss");
        alert(JSON.stringify(result));
    }, function (error) {
       alert("error");
       alert(JSON.stringify(error));
    });
}