How to get a variable attribute of an HTML element?

Question

I have a ng-repeat in which I have set an attribute like so:

<div ng-repeat="item in itemsList"
     stepType="{{item.stepType}}">
     {{item.itemValue}}
</div>

item.stepType can have values 'task' or 'action' I'm trying to get the attribute 'stepType' like so:

let stepType = el.getAttributeNode("stepType");
console.log(stepType.value);

The result i'm getting is:

{{item.stepType}}

But the expected result is task or action

I also tried to get the attribute using the function getAttribute() but the result is the same.

I also noticed that in the above code if i log the value of stepType instead of stepType.value, i get the object which looks like this stepType: 'task'

How can i get the expected value?

score 1 · Accepted Answer · answered Dec 22 '19 at 17:25

If the attribute name is normalized:

<div ng-repeat="item in itemsList"
     step-type="{{item.stepType}}">
     {{item.itemValue}}
</div>

A custom AngularJS directive can $observe the attribute:

app.directive("stepType", function() {
    return {
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        attrs.$observe("stepType", function(value) {
            console.log(value);
        });
    }
})

The console will log changes to the interpolated value of the attribute.

This actually works - attrs gets me the value of any attribute which otherwise was not getting evaluated — Haris Muzaffar, Dec 22 '19 at 17:32

score -1 · Answer 2 · answered Dec 22 '19 at 12:12

-1

Try removing the double quotes. Replace this

<div ng-repeat="item in itemsList"
     stepType="{{item.stepType}}">
     {{item.itemValue}}
</div>

with

<div ng-repeat="item in itemsList"
     stepType={{item.stepType}}>
     {{item.itemValue}}
</div>

answered Dec 22 '19 at 12:12

Sanil Khurana

1,129
9
20

I am getting the same result, no change – Haris Muzaffar Dec 22 '19 at 12:18

How to get a variable attribute of an HTML element?

2 Answers2