CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
pengz
pengz

Reputation: 2471

How to get the attributes of an element when clicked in ng-repeat

I have an anchor tag with multiple data-* attributes and the anchor will be repeated several times using ng-repeat. I want to grab the value of the attributes for when a single element is clicked.

I am using JQuery to get the attribute values and it is easy using $(this).attr('attribute').

However, this only works with a single button on the page. This does not work when multiple buttons are rendered using ng-repeat. I am assuming this is because multiple buttons are rendered with the same attribute names and jquery does not know how to differentiate between them. How can I get the data-* attribute values of the element that is clicked?

//JQuery
//Works when only a single editButton is on the page but not when multiple buttons are rendered using ng-repeat
     $('.editButton').on('click', function () {
        var filepath_id = $(this).attr('data-filepath-id');
        var requested_filepath = $(this).attr('data-requested-filepath');
        var requested_filename = $(this).attr('data-requested-filename');
      })


//HTML
//Confirmed that each editButton element has the correct attribute values depending on the item
  tr(ng-repeat='item in vm.items')
    a.editButton.btn.btn-primary(
      data-toggle="modal",
      data-filepath-id="{{item.id}}",
      data-requested-filepath="{{item.requested_filepath}}",
      data-requested-filename="{{item.filename}}",
      href="#editFilepathPopup"
      ) Edit

Upvotes: 0

Views: 117

Answers (1)

NicoLA
NicoLA

Reputation: 71

Think I can help. In angularJS the event listener is an attribute in the html element. Example : 

ng-repeat = "item in vm.items" ng-click="onClickFunction();"

If you want to get a specific item's attributes, place the item as a parameter in your event function.

ng-repeat = "item in vm.items" ng-click="vm.onClickFunction(item);"

Now in your angular controller you create that click function. This is where you can do more logic like setting values to your controller values.

onClickFunction(itemParam) {
console.log("this is itemParam", itemParam);
var x = itemParam.requested_filepath;
this.x = itemParam.requested_filepath;
}

Upvotes: 1

Related Questions