CODEWITHSUNDEEP
javascriptangularjs
Lucas_Santos
Lucas_Santos

Reputation: 4740

Access the component ID in AngularJS

How can I get the id of a component in AngularJS ?

HTML

<li class="list-group-item" id="person_2" ng-click="invitePerson(this)">
    <span class="label label-primary">A</span> Alexandre Dolabella Resende
</li>

JS

$scope.invitePerson = function(id) {
    alert(id);
};

The alert returns [Object object], how can I access my component ID ? (in my case, should be person_2)

Console.log

enter image description here

Upvotes: 1

Views: 3951

Answers (3)

maurycy
maurycy

Reputation: 8465

When I see "person_2" I immediately think of ng-repeat and maybe you should too if you want to iterate over object in your partial, http://plnkr.co/edit/b6ZePD826FauaY9x8b9p?p=preview

<label for="list">List</label>
<ul id="list">
  <li class="list-group-item" id="person{{$index}}" ng-click="invitePerson(person)" ng-repeat="person in persons">
    <span class="label label-primary">{{person.label}}</span> {{person.name}}
  </li>
</ul>
<label for="invited">Invited</label>
<ul id="invited">
  <li ng-repeat="invite in invited track by $index">{{invite.name}}</li>
</ul>

Upvotes: 0

Arun
Arun

Reputation: 91

Use $event to get the eventhandler param. From that param we can get the target element and its attributes

<li class="list-group-item" id="person_2" ng-click="invitePerson($event)">
<span class="label label-primary">A</span> Alexandre Dolabella Resende


$scope.invitePerson = function(e){
alert(e.target.id);
}

Upvotes: 2

olingern
olingern

Reputation: 493

You can use ng-init or your controller to initialize the value. Then define a model, and you can then pass that model into a controller function, such as invitePerson

Working Plunker

HTML:

<ul>
    <li class="list-group-item" id="person_2"
        ng-init="person_2=5"
        ng-model="person_2"
        ng-click="invitePerson(person_2)">
        <span class="label label-primary">A</span> Alexandre Dolabella Resende
    </li>
</ul>

JS:

app.controller('MainCtrl', function($scope) {
  $scope.invitePerson = function(id){
    alert(id);
  }

Upvotes: 0

Related Questions