What is the best way to toggle a specific div element within an ng-repeat loop?

Question

What is the best way to toggle a specific div element within an ng-repeat loop?

I have a list of products. When I click on a product, it should be added to the database. If I click on the same product again, it should be removed from the database. I am toggling the wishlistFlag using ng-click. This works correctly for one div element, but for the second div element, it behaves in reverse. For example, if the first product is added and then I click on the second product, the first product gets removed instead of adding the second product.

<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>

And here is the Controller code:

a.WishlistAdd = function (index,propertyId) {

    a.wishlistFlag = !a.wishlistFlag;

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

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

How can I implement toggling wishlistFlag for different products?

javascript html css angularjs

Answer 1

Answer №1

If you only want one product selected in your wish list, consider using the product id instead of a boolean flag. This way, the "selectedProductId" variable in the controller can either be null (if no product is selected) or contain the id of the selected product.

To toggle selection, simply check if the current selected id matches the clicked one.

Assumptions:

When "wishListFlag === true" in the data sent, the product identified by "propertyId" should be added. Otherwise, it should be removed from the database.
Adding a product on the server side will replace any existing selected product.

// 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));
    });
}

Answer 2

If you only want one product selected in your wish list, consider using the product id instead of a boolean flag. This way, the "selectedProductId" variable in the controller can either be null (if no product is selected) or contain the id of the selected product.

To toggle selection, simply check if the current selected id matches the clicked one.

Assumptions:

When "wishListFlag === true" in the data sent, the product identified by "propertyId" should be added. Otherwise, it should be removed from the database.
Adding a product on the server side will replace any existing selected product.

// 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));
    });
}

Answer 3

Answer №2

Utilize $index to assign a unique flag to each item in the wishList. Examples of how this can be implemented include:

a.wishListFlag[index]

Answer 4

Utilize $index to assign a unique flag to each item in the wishList. Examples of how this can be implemented include:

a.wishListFlag[index]

Answer 5

Answer №3

Keep a record of added propertyIds in an array before saving to the database. Check if the id is already in the array - if it is, remove it from the database and the array. If not, simply remove it from the database.

    var wishList = [];

    a.WishlistAdd = function (index,propertyId) {


        var data = {
            wishlistFlag: wishList.indexOf(propertyId) === -1,
            propertyId:propertyId
        };

        e.createWishLists(data).then(function (result) {

            //add or remove propertyid from whishList
            if(data.wishlistFlag)
                wishList.push(propertyId);

            else
                wishList.splice(wishList.indexOf(propertyId), 1);

            alert("sucesss");
            alert(JSON.stringify(result));
        }, function (error) {
           alert("error");
           alert(JSON.stringify(error));
        });
    }

Answer 6

Keep a record of added propertyIds in an array before saving to the database. Check if the id is already in the array - if it is, remove it from the database and the array. If not, simply remove it from the database.

    var wishList = [];

    a.WishlistAdd = function (index,propertyId) {


        var data = {
            wishlistFlag: wishList.indexOf(propertyId) === -1,
            propertyId:propertyId
        };

        e.createWishLists(data).then(function (result) {

            //add or remove propertyid from whishList
            if(data.wishlistFlag)
                wishList.push(propertyId);

            else
                wishList.splice(wishList.indexOf(propertyId), 1);

            alert("sucesss");
            alert(JSON.stringify(result));
        }, function (error) {
           alert("error");
           alert(JSON.stringify(error));
        });
    }

What is the best way to toggle a specific div element within an ng-repeat loop?

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble displaying an image in your React project?

The Arrival of Link: A Countdown Timer

How do I switch languages in Angular?

Steps for creating a herringbone design on an HTML canvas

Tips for obtaining response headers

Creating a dynamic form that efficiently captures user information and automatically redirects to the appropriate web page

Adding an HTML arrow icon within a button

Creating a layout with an image positioned on the left and text on the right within a block using CSS

Troubleshooting drag-and-drop functionality in a JavaScript HTML5 application resembling a Gmail upload interface

The size of objects on canvas is not consistent when loading with fabric.js loadFromJSON

A step-by-step guide on showcasing the content from a textfield onto a dynamic column chart

Is it possible to execute a URL twice instead of just once in AngularJS?

Eliminating the Controller from the Previous Route Upon Reaching the Next Route

The x-axis is represented by JSON keys, while the y-axis is represented by

The GET API is functioning properly on Google Chrome but is experiencing issues on Internet Explorer 11

Mobile devices experiencing issues with Bootstrap navbar collapse functionality

What is the best way to combine elements from different arrays to create a comprehensive listing?

What is the best way to eliminate the blue outline around an image map?

hide content on both desktop and mobile devices

Dynamic extension of classes in SCSSORExtending classes