How do I know which button was clicked to add as an object to array in the ng-repeat?

Question

I create buttons in ng-repeat and set value for each one. I want to get the value from a selected button and add to array, and, if clicked other buttons, also add the value to the array as an object. If clicked again the same button, the value should be removed object from the array.

 <div  ng-repeat="room in Rooms">
  ...
    <button id="HR_{{room.Id}}"  value="{{room.Id}}" onclick="AddToCart({{room.Id}})">Add To Cart</button>
 </div>

Javascript:

var cartlist = [];

function AddToCart(n) {
    var c = $("#cartcount").text();

    cartlist.push({
        Id: n,
    });
    $("#cartcount").text(parseInt(c) + 1);
}

this code onclick="AddToCart({{room.Id}})" cause an error. I use ng-click but I could not get an answer.

onclick="AddToCart(room.Id)" should work. you don't need interpolation inside the handler. — Davin Tryon
– Davin Tryon, Commented Dec 29, 2016 at 15:22
Bad Practice: You can pass event to AddToCart and get the value of clicked button using event.target.value. — Tushar
– Tushar, Commented Dec 29, 2016 at 15:22
Possible duplicate of Adding parameter to ng-click function inside ng-repeat doesn't seem to work — Codemole
– Codemole, Commented Dec 29, 2016 at 15:36

Yoan · Accepted Answer · 2016-12-29 15:48:21Z

For this behavior that you need, add or remove with the same button you need to add some logic to check if the element is in the array or not. you can do something like:

HTML:

selectedRooms: {{selectedRooms}}

<div ng-repeat="room in rooms">
  <button ng-click="Add_Remove_Room(room.id)">Add / Remove {{room.name}}</button>
</div>

controller:

angular.module('tAngularApp')
  .controller('MainCtrl', ["$scope", "$rootScope", function ($scope, $rootScope) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    $scope.rooms = [
        {id:1, name: "Room #1"},
        {id:2, name: "Room #2"},
        {id:3, name: "Room #3"},
        {id:4, name: "Room #4"}
    ];

    $scope.selectedRooms = [];


    $scope.Add_Remove_Room = function (roomID) {
        var index = $scope.selectedRooms.indexOf(roomID);
        if(index === -1){
            // If is not selected the room -> add it
            $scope.selectedRooms.push(roomID);
        } else {
            // If is  selected the room -> remove it
            $scope.selectedRooms.splice(index, 1);
        }
    }

}]);

Community · Accepted Answer · 2017-05-23 11:46:00Z

2

This is already answered in this question: Adding parameter to ng-click function inside ng-repeat doesn't seem to work

This was the answer:

Instead of

<button ng-click="removeTask({{task.id}})">remove</button>

do this:

<button ng-click="removeTask(task.id)">remove</button>

Please see this fiddle:

http://jsfiddle.net/JSWorld/Hp4W7/34/

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Dec 29, 2016 at 15:23

C. Molendijk

2,8944 gold badges29 silver badges40 bronze badges

1 Comment

TheSharpieOne Over a year ago

FYI: The OP is trying to use onclick not ng-click

Balaji Marimuthu · Accepted Answer · 2016-12-29 15:31:26Z

1

Use ng-click and remove the interpolation.

<button id="HR_{{room.Id}}"  value="{{room.Id}}" ng-click="AddToCart(room.Id)">Add To Cart</button>

answered Dec 29, 2016 at 15:31

Balaji Marimuthu

2,06814 silver badges14 bronze badges

Comments

Nora · Accepted Answer · 2016-12-29 15:22:18Z

0

You should use ng-click instead like so:

ng-click="AddToCart(room.Id)"

answered Dec 29, 2016 at 15:22

Nora

3,2812 gold badges23 silver badges23 bronze badges

Collectives™ on Stack Overflow

How do I know which button was clicked to add as an object to array in the ng-repeat?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related