JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了在javascript中实现角度ng-repeat特征大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我目前正在研究一种代码来实现像角度的ng-repeat.基本上是html中的for循环.
代码使用类“循环”获取每个元素,并使用通过“info”属性给出的信息对其进行处理.这是代码:
HTML
<div class="loop" data-info="i in 1 to 10">
 -i-
</div>

使用Javascript

$(".loop").each(function(i){
 var loop_info=$(this).attr("data-info");
 var fin=loop_info.match(/(.*) in (\d+) to (\d+)/);
 var variable=fin[1],initial=fin[2],final=fin[3];
 var htm=$(this).html(),printed="";
 for(j=initial;j<=final;j++){
  var temp=htm;
  var r=new RegExp("-("+variable+")-","g")
  temp=temp.replace(r,j);
  printed+=temp;
 }
 $(this).html(printed);
});

现在我还包括用数字替换 – 变量的功能.

一切都很完美但是当循环嵌套时,即

<div class="loop" data-info="i in 1 to 10">
 <div class="loop" data-info="j in 1 to 10">
  -j-
 </div>
</div>

它不适用于嵌套循环,即-j-不会被数字取代.
我不知道为什么会这样,任何帮助都表示赞赏.

解决方法

替换失败是因为HTML已更改,并且jQuery为for循环收集的下一个.loop引用不再代表之前的内容.

相反,让你的for循环走向相反的方向:

$($(".loop").get().reverse()).each(function(i){
    // etc...

片段:

$($(".loop").get().reverse()).each(function(i){
  var loop_info=$(this).attr("info");
  var fin=loop_info.match(/(.*) in (\d+) to (\d+)/);
  var variable=fin[1],final=fin[3];
  var htm=$(this).html(),printed="";
  for(j=initial;j<=final;j++){
    var temp=htm;
    var r=new RegExp("-("+variable+")-","g")
    temp=temp.replace(r,j);
    printed+=temp;
  }
  $(this).html(printed);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loop" info="i in 1 to 10">
    <div class="loop" info="j in 1 to 10">
      -i-:-j-
    </div>
</div>

大佬总结

以上是大佬教程为你收集整理的在javascript中实现角度ng-repeat特征全部内容,希望文章能够帮你解决在javascript中实现角度ng-repeat特征所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。