Convert jquery code to angular to add classes dynamically on function call from controller

Question

I;m having Jquery code that adds class dynamically on function call and I'm passing argumaents based on different conditions.

function setClasses(index, steps) {
    $(".step-wizard ul li:lt(" + index + ")").each(function () {
        $(this).addClass("done");
    });
    $(".step-wizard  ul li:eq(" + index + ")").addClass("active")
    var p = index * (100 / steps);
    $("#prog").width(p + '%');
}
setClasses(3, 4);

Since I'm using typescript and angular(1.5.6)I wanted to convert the above code to function using angular's built in DOM manipulation functions.

Below is the one that I tried :

function setClasses(index,steps) {
    let myEl1 = angular.element(document.querySelector('.step-wizard ul li:lt'));               
    var myEl2 = angular.element(document.querySelector('.step-wizard  ul li:eq'));
    myEl1.addClass('done');
    myEl2.addClass('visited');
    let p = index * (100 / steps);
    myEl2.setWidth(p + '%'); //setWidth is not a angular.element property
}
setClasses(3, 4);

I'm not sure how can I add the below part and also to set the width:

$(".step-wizard ul li:lt(" + index + ")").each(function () {
    $(this).addClass("done");
});

Please suggest some good conversion techniques for DOM manipulation using angular built in functions Reference(angular.element)

what is the index value? you are just passing a single value but repeating as each — Ram_T
– Ram_T, Commented Jan 6, 2017 at 10:27
yes index is a single value.Here is the original code codepen.io/anon/pen/wgaBGN — forgottofly
– forgottofly, Commented Jan 6, 2017 at 10:31
Please find the plunker : plnkr.co/edit/2bH02xQipuvlavGpdLn2?p=preview — forgottofly
– forgottofly, Commented Jan 6, 2017 at 11:00
What happens if I pass 3 as index value? Can you explain the last code of your question? Is that adding class done to first three li elements? — Ram_T
– Ram_T, Commented Jan 6, 2017 at 11:04

Ram_T · Accepted Answer · 2017-01-06 11:34:22Z

1

See the working plunker with angular code https://plnkr.co/edit/URWgTCRP2TeT9tNvuwzY?p=preview

Yeah, done. remove below lines

$(".step-wizard ul li:lt(" + index + ")").each(function () {
    $(this).addClass("done");
});

Add

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

below the jquery source file in index.html.

Replce the removed lines with beolw code.

var elems = [];
for(i=0;i<index;i++){
  elems.push(angular.element(document.querySelectorAll("li"))[i])
}
angular.forEach(elems, function(value, key){
   var a = angular.element(value);
   a.addClass('done');
});

I am unable to save the plunker as it is private

answered Jan 6, 2017 at 11:34

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

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

4 Comments

forgottofly Over a year ago

Thanks,Please check the plunker link.Its the same as that in the question

Ram_T Over a year ago

No, I changed the the above code in script.js. Please see that

forgottofly Over a year ago

And how about $("#prog").width(p + '%'); ?

Ram_T Over a year ago

I just do that only. You can do by taking it as a reference

Collectives™ on Stack Overflow

Convert jquery code to angular to add classes dynamically on function call from controller

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related