How to set the id attribute of a HTML element dynamically with angularjs (1.x)?

javascript angularjs angularjs-scope string-concatenation
Thierry Marianne picture Thierry Marianne · May 14, 2014 · Viewed 381.8k times · Source

Provided an HTML element of type div, how to set the value of its id attribute, which is the concatenation of a scope variable and a string ?

Answer

Thierry Marianne picture Thierry Marianne · May 14, 2014

ngAttr directive can totally be of help here, as introduced in the official documentation

https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

For instance, to set the id attribute value of a div element, so that it contains an index, a view fragment might contain

<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

which would get interpolated to

<div id="object-1"></div>

Related questions

Confirmation dialog on ng-click - AngularJS

I am trying to setup a confirmation dialog on an ng-click using a custom angularjs directive: app.directive('ngConfirmClick', [ function(){ return { priority: 1, terminal: true, link: function (scope, element, attr) { var msg = attr.ngConfirmClick || "Are you sure?"; var clickAction = attr.ngClick; …

Read More
AngularJS - get element attributes values

How do you get an element attribute value? e.g. HTML element: <button data-id="345" ng-click="doStuff($element.target)">Button</button> JS: function doStuff(item){ angular.element(item)[0].data('id'); // undefined is not a function } Any suggestions …

Read More
$watch an object

I want to watch for changes in a dictionary, but for some reason watch callback is not called. Here is a controller that I use: function MyController($scope) { $scope.form = { name: 'my name', surname: 'surname' } $scope.$watch('form', function(newVal, …

Read More