将 jquery 代码转换为 angular 以在来自控制器的函数调用上动态添加类

Question

我有 Jquery 代码，在函数调用时动态添加 class，我根据不同的条件传递参数。

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

因为我使用的是 typescript 和 angular(1.5.6)，所以我想将上面的代码转换为使用 angular 内置的 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");
});

请使用 angular 内置函数 Reference(angular.element)

为 DOM 操作推荐一些好的转换技术

Answer 1

使用 angular 代码 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>

在 index.html 中的 jquery 源文件下方。

用下面的代码替换删除的行。

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，因为它是私有的

将 jquery 代码转换为 angular 以在来自控制器的函数调用上动态添加类

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

javascript

jquery

element

angularjs

将 jquery 代码转换为 angular 以在来自控制器的函数调用上动态添加 类

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

javascript

jquery

element

angularjs

将 jquery 代码转换为 angular 以在来自控制器的函数调用上动态添加类