Getting data attribute in angular

Question

I am trying to get the data attribute from this:

<button ng-click="EditPlayer(name, position, number, age)" id="btnEdit" class="btn btn-successes" data-playerid="{{player.id}}">Save</button>

In my angular controller I have:

$scope.EditPlayer = function(name, position, number, age) {

    var player_id = $(this).data('playerid');

    console.log(player_id);

    var player = new Player(name, position, number, age);

    $http({
        method : "PUT",
        url : 'api.php/players/'+player_id,
        data: JSON.stringify(player),
    }).then(function mySucces(player) {
        $scope.players.push(player);
    }, function myError(response) {
        $scope.showError = response.statusText;
    });
};

I need to get the attribute so I can target each player_id for an update (PUT request). The problem is that $(this).data(player_id) is returning undefined.

From the way you're setting data-playerid="{{player.id}}" and the method on the same button, it means u should have access to the "player" object from the controller. You can do player_id = $scope.player.id — Murwa
– Murwa, Commented Apr 21, 2016 at 9:06

Arun P Johny · Accepted Answer · 2016-04-21 08:49:18Z

4

Just pass it as another argument to the function

<button ng-click="EditPlayer(name, position, number, age, player.id)" id="btnEdit" class="btn btn-successes" data-playerid="{{player.id}}">Save</button>

then

$scope.EditPlayer = function(name, position, number, age,player_id) {
    console.log(player_id)

answered Apr 21, 2016 at 8:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GarethFrazer Over a year ago

This is perfect. Thanks!

Collectives™ on Stack Overflow

Getting data attribute in angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related