使用ng-repeat使用不同的索引值

11 浏览
0 Comments

使用ng-repeat使用不同的索引值

我在ng-repeat中嵌套了另一个ng-repeat来构建导航菜单。在内部ng-repeat循环的每个

  • 上,我设置了一个ng-click,通过传入$index来调用相应的控制器,让应用程序知道我们需要哪一个。然而,我还需要传入外部ng-repeat的$index,以便应用程序知道我们所在的部分以及教程。\n以下是一个Plunker链接:http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

  • 0
    0 Comments

    使用ng-repeat时使用不同的索引值的问题是因为在嵌套循环中使用$index时可能会导致一些问题。在这种情况下,使用ng-repeat="(key,value) in data"的语法可以解决这个问题。这种语法允许给$index赋予自定义的名称,并且可以区分两个索引值。

    以下是使用这种语法的示例:

    {{indexX}} - {{indexY}} - {{value}}

    使用这种语法可以更清晰地进行多重嵌套循环,而不需要使用parent。

    然而,实际上,当在使用angular-ui-tree拖放节点时,这种语法可能会导致一些问题。索引似乎没有重置,导致一些奇怪的结果。为了解决这个问题,可以尝试在plunker中重现该行为。

    这种使用自定义索引的语法是正确的方法,可以避免潜在的问题。使用ng-init只适用于初始渲染,如果页面上的对象被更新,它就会出错。

    另外,需要注意的是,在使用"track by"时,应该使用与对象特定的标识符,而不是使用索引作为标识符。如果没有可用的唯一标识符,可以使用类似于plunker示例中的"track by"的解决方法。

    通过使用ng-repeat的不同索引值的语法,可以更清晰地进行多重嵌套循环,并避免可能出现的问题。但在使用索引作为标识符时,需要注意使用"track by"的正确方式。

    0
    0 Comments

    问题的原因是在使用ng-repeat时,想要使用不同的索引值进行操作。解决方法是使用ng-init指令来设置一个新的变量来表示索引值。以下是一个解决方法的示例代码:

    • {{section.name}}
      • {{tutorial.name}}

    这种方法在实现这种效果时被推荐使用。事实上,Angular团队曾多次表示这是ng-init指令的几个推荐用法之一。使用$parent的方式通常不是一个好的做法,因为通常有更好的方法来实现$scope到$scope的通信(例如使用服务或广播/发射事件),而且通过赋值给一个命名变量,可以更清楚地表示该值的含义。

    这种解决方法比接受的答案更好。使用$parent是非常不推荐的。

    这是比接受的答案更好、更优雅的解决方法(我尝试过之前的解决方法,最后我的代码中出现了$parent.$parent.$index - 看起来非常脆弱)。谢谢!

    当从列表中删除项目时,这种解决方法将停止工作,因为ng-init的值不会重新初始化。只有在不打算从列表中删除项目时才有用。

    这是一个非常重要的问题,可以避免一些非常困难的错误。

    看起来Angular的语法已经有所发展。你现在可以使用"ng-repeat = (key,value) in data"来实现这个效果。

    这种解决方法简单,但比使用$parent选择器更好,因为父级可能会发生变化。

    早些时候我写这个答案时,这是在Angular 1.X中实现这个效果的方法。这种使用ng-init的方法在ng-init文档中演示过,但在ng-repeat文档中没有提到过,所以我在这里写了这个答案,并在Github上修改了文档。当前的ng-repeat语法有一种更好的方法来实现这个效果,这在stackoverflow.com/a/31477492/2516560中有示例。它没有你在评论中提到的一些缺陷。

    0
    0 Comments

    使用ng-repeat时使用不同的索引值的问题是由于每个ng-repeat都会创建一个带有传递数据的子作用域,并在该作用域中添加一个额外的$index变量所致。解决方法是通过访问父作用域并使用父作用域中的$index。可以使用$parent.$index来访问外部$index值。示例代码如下:

  • {{tutorial.name}}
  • 如果需要传递多个$index值,可以将它们放入一个数组中。示例代码如下:

    ng-click="loadFromMenu($parent.$index, $index)"
    

    在loadFromMenu函数中,可以通过this对象来访问this.$index和this.$parent.$index。但是,这种方法将函数与具有$index和父作用域$index的作用域上下文硬编码在一起,如果在菜单中创建了其他作用域,则需要更改loadFromMenu函数而不是调用loadFromMenu函数。因此,不建议使用这种方法。

    通常情况下,可以根据资源构建特定的指令来解决此类问题,以避免上述问题的出现。

    如果要在控制器中使用2D数组表示表格模型,则可以使用嵌套的ng-repeat来处理简单的表格。示例代码如下:

    
        
            {{cell}}
        
    
    

    不建议使用$parent.$index,因为它不是安全的。如果在循环内部添加了ng-if,$index会混乱。推荐参考提供的链接中的答案来解决此问题。

    总之,使用ng-repeat时,可以通过$index和$parent.$index来访问不同的索引值。但是,为了避免出现问题,最好使用指令或其他方法来处理复杂的嵌套情况。

    0