在javascript中实现类似ng-repeat的角度功能 [英] achieving angular ng-repeat like feature in javascript

问题描述

我目前正在编写代码以在 angular 中实现类似 ng-repeat 的功能.基本上是 html 中的 for 循环.该代码采用类loop"的每个元素，并使用通过info"属性给出的信息对其进行处理.这是代码:HTML

-一世-

Javascript

$(".loop").each(function(i){var loop_info=$(this).attr("data-info");var fin=loop_info.match(/(.*) in (\d+) to (\d+)/);var 变量=fin[1],初始=鳍[2]，最终=鳍[3]；var htm=$(this).html(),printed="";for(j=initial;j<=final;j++){var temp=htm;var r=new RegExp("-("+变量+")-","g")temp=temp.replace(r,j);打印+=温度；}$(this).html(打印);});

现在我还包含了用数字替换 - 变量 - 的功能.

一切正常，但是当循环嵌套时，即

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

它不适用于嵌套循环，即 -j- 不会被数字替换.我不知道为什么会这样，感谢您的帮助.

解决方案

替换失败，因为 HTML 已更改，以及 jQuery 为您的 for<收集的下一个 .loop 引用/code> 循环，不再代表之前的内容.

相反，让你的 for 循环反向运行:

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

片段:

$($(".loop").get().reverse()).each(function(i){var loop_info=$(this).attr("info");var fin=loop_info.match(/(.*) in (\d+) to (\d+)/);var 变量=fin[1],初始=鳍[2]，最终=鳍[3]；var htm=$(this).html(),printed="";for(j=initial;j<=final;j++){var temp=htm;var r=new RegExp("-("+变量+")-","g")temp=temp.replace(r,j);打印+=温度；}$(this).html(打印);});

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

Im currently working on a code to achieve something like ng-repeat in angular. Basically a for-loop in html. the code takes every element with the class "loop" and processes it with the information given through the "info" attribute. Here is the code : 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);
}); 

Now i have also included the feature to replace the - variable - with the numbers.

Everything worked perfectly but when the loops are nested i.e

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

it doesnt work on the nested loop ,i.e -j- doesnt get replaced with the numbers. I dont know why this is happening ,any help is appreciated.

解决方案

The replacement fails because the HTML is changed, and the next .loop reference that jQuery had collected for your for loop, no longer represents what it was before.

Instead, make your for loop go in reversed direction:

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

Snippet:

$($(".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],
      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);
});

<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的角度功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！