Access the component ID in AngularJS

Question

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

first of all better use console.log to see what is in `id` object, secondly I think you are trying hard to not do it in angular way ;) post more of your code with controller and mock data so we can show you right way — maurycy, Feb 02 '15 at 12:27
I'm trying a static way to understand it, so this is a simple HTML. I want to access the id of my component when my user click on it. I try the console.log but seems a little weird to me. I updated the question with the console.log — Lucas_Santos, Feb 02 '15 at 12:34
unless you're creating a directive, the javascript side must never know what´s going on in the DOM — Sergio Marcelino, Feb 02 '15 at 12:41
@SergioFilhow I did different, I pass $event in ng-click like invitePerson($event, this) and then in $scope.invitePerson = function($event, id) { var idElement = $event.currentTarget.id; }, but for future implementations, it will be a directive. — Lucas_Santos, Feb 02 '15 at 12:51
It's still not the correct way. Angular's purpose is to divide javascript and html, so, the only component that knows the HTML(DOM) is a directive because it adds behavior to html elements. I don't know why you need the element ID, but I'm sure there's a better way to solve your problem. — Sergio Marcelino, Feb 02 '15 at 13:02

score 2 · Accepted Answer · answered Feb 02 '15 at 13:59

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

score 0 · Answer 2 · answered Feb 02 '15 at 12:42

0

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

answered Feb 02 '15 at 12:42

olingern

494
1
4
15

I did different, I pass $event in ng-click like invitePerson($event, this) and then in $scope.invitePerson = function($event, id) { var idElement = $event.currentTarget.id; } – Lucas_Santos Feb 02 '15 at 12:50
2

Hmm.. .you may want to read this, you're doing things super unnatural in Angular: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq=1 – olingern Feb 02 '15 at 12:58

score 0 · Answer 3 · answered Feb 02 '15 at 14:19

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>

Access the component ID in AngularJS

3 Answers3