How to set html id tag dynamically through angularjs?

Question

I know I can set html src tag like <img ng-src="{{phone.imageUrl}}">. But how can I set an id tag like <span id="sourceId::{{post.id}}" class="count"></span> ? I tried <span id="{{ 'sourceId::'post.id }}" class="count"></span> but it didn't work.

Basically you should not change Id of elements. it is there to identify the element and get it and manipulate it. — Jenish Rabadiya
– Jenish Rabadiya, Commented Feb 18, 2015 at 6:52
Agree with @JenishRabadiya, but id="sourceId::{{post.id}}" should set id correctly — karaxuna
– karaxuna, Commented Feb 18, 2015 at 6:53
Thou shall not change ID's consider using a data-* attribute for this kind of situations — josegomezr
– josegomezr, Commented Feb 18, 2015 at 6:57

Jenish Rabadiya · Accepted Answer · 2015-02-18 06:58:25Z

1

It worked for me.

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <span id="{{name}}" class="count">Jeinsh</span>
  </body>

</html>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

here is working plunk => link

Inspect the element in developer tool on span and you will get updated id there.

answered Feb 18, 2015 at 6:58

Jenish Rabadiya

6,7766 gold badges35 silver badges62 bronze badges

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

Comments

Michal Charemza · Accepted Answer · 2015-02-18 07:02:01Z

1

As @karaxuna said, the following should work

id="sourceId::{{post.id}}"

Or doing the string concatenation inside the {{}} with a +

id="{{'sourceId::' + post.id}}"

answered Feb 18, 2015 at 7:02

Michal Charemza

27.3k15 gold badges114 silver badges191 bronze badges

Collectives™ on Stack Overflow

How to set html id tag dynamically through angularjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related