Преобразование кода jquery в угловое для динамического добавления классов на вызов функции от контроллера

Question

I; m с кодом JQuery, который динамически добавляет класс к вызову функции, и я прохожу рассуждения на основе разных условий.

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

Поскольку я использую машинопись и угловой (1.5.6) Я хотел, чтобы преобразовать код выше, чтобы функционировать с использованием угловой построен в функции манипулирования DOM.

Ниже один, что я пробовал:

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

Я не знаю, как я могу добавить ниже часть, а также установить ширину:

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

Пожалуйста, предложить некоторые хорошие преобразования методы для манипуляций с DOM с использованием функций с угловыми функциями Reference(angular.element)

Answer 1

См. рабочий плункер с угловым кодом https://plnkr.co/edit/URWgTCRP2TeT9tNvuwzY?p=preview

Да, сделано. удалить ниже линии

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

Добавить

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

ниже исходный файл JQuery в index.html.

Замените удаленные строки кодом beolw.

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

Я не смог спасти plunker как это частная