AngularJS如何在ng-repeat中递增初始变量值而无需点击？

Question

如何在ng-repeat中递增初始化变量的值

   <div ng-if="feedData.carouselMode == true" ng-init='start=0'  ng-repeat="a in carousel_data">

            <div  class="owl-demo" class="owl-carousel"   owl-carousel >
            <div class="item"  ng-repeat="(key, item) in a.carouselFeeds" ng-init="start=start+1">
                {{start}}
                <div ng-click="go('{{key}}', item.feedUrls.length, 'rtl')" ng-swipe-left="go('{{key}}', item.feedUrls.length, 'rtl')">
            <img class="lazyOwl"  ng-src="{{item.img}}"  />  
            <span class="innersquare" image-ja="{{item.img}}"> 
                <p ng-style="folderStyle">{{item.name  }}&nbsp;</p> </span>
                 </div> 
            </div>
        </div>
    </div>

在ng-repeat中，使用ng-init初始化start为0，然后通过增量操作start=start+1。但是没有count属性，只显示1。

- Angu

---

你为什么不使用 $index？ - a better oliver

$index 也将从0开始。请参阅https://docs.angularjs.org/api/ng/directive/ngRepeat - Vivek Vardhan

你希望从这个组合中得到什么？ - squiroid

@angu现在可以了吗？ - squiroid

Answer 1

这是因为每个ng-repeat都有自己的作用域，而每个ng-init只会增加其自己作用域中的变量。您可以尝试使用$parent访问父级作用域。

如果您正在寻找连续编号，请尝试使用以下方法

<div ng-controller="MyCtrl">
<div ng-repeat="a in ['a','b','c']" ng-init="current = $parent.start; $parent.start=$parent.start+3;">
        <div ng-repeat="x in ['alpha','beta','gamma']">
            {{current + $index}}
    </div>
</div>

+3 应该改为 +[内部数组的长度]。

http://jsfiddle.net/rvgvs2jt/2/

对于您的特定代码，它应该是这样的

<div ng-if="feedData.carouselMode == true" ng-init='current=$parent.start; $parent.start=$parent.start+a.carouselFeeds.length' ng-repeat="a in carousel_data">
    <div class="owl-demo" class="owl-carousel" owl-carousel>
        <div class="item" ng-repeat="(key, item) in a.carouselFeeds">
            {{current + $index}}
            <div ng-click="go('{{key}}', item.feedUrls.length, 'rtl')" ng-swipe-left="go('{{key}}', item.feedUrls.length, 'rtl')">
                <img class="lazyOwl" ng-src="{{item.img}}" />
                <span class="innersquare" image-ja="{{item.img}}"> 
                <p ng-style="folderStyle">{{item.name  }}&nbsp;</p> </span>
            </div>
        </div>
    </div>
</div>

- Jonathan

---

我正在创建Fiddle，你比我快了40秒 :-P - squiroid

没关系，我们一起解决了。+1 给你的努力。:-P - squiroid

@Rouby，你需要加上+1，让它从1开始而不是0。 - squiroid

请帮我一下。我正在使用这个Fiddle，并且需要正确的解决方案。请检查以下链接：https://jsfiddle.net/7sqe9kqb/1/ - Angu

感谢 @Rouby。$parent.start 是什么？你能解释一下吗？ - Angu

只是另一个作用域变量，它代表了所有先前内部数组的累积长度。它被复制到“current”中，以便我们可以规避Angular绑定并在那个时间（在内部ng-repeat中）显示该变量的值，而不是最近的值（这将是所有内部数组的最终长度）。 - Jonathan

Answer 2

我猜您是通过简单的{{$parent.$index}}实现这个目标的。 更新 根据评论。

<div ng-controller="MyCtrl">
<div ng-repeat="a in one">
        <div ng-repeat="x in two">
            {{($parent.$index*two.length)+($index+1)}}
    </div>
</div>

控制器：

$scope.one= ['alpha','beta','gamma'] ;
$scope.two=['alpha','beta','gamma'];

Fiddle

- squiroid

---

你能用简单的例子来解释一下吗？ - squiroid

ng-repeat="x in ['alpha','beta','gamma']" 长度为3，循环加载后显示相同长度，我需要4、5、6的计数。你明白我的意思吗？ - Angu

jsfiddle.net/3Lt21u6 是一个可运行的代码示例，但我想要的是从1到9的索引，请问你能帮我吗？ - Angu

愉快的编码，亲爱的 :) - squiroid

请记住，这仅在内部数组长度始终相同时才有效。 - Jonathan

Answer 3

你可以使用$index进行访问，查看这个代码。

<div ng-app ng-controller="TestController">
  <div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item.value" type="text"/>
  </div>
  {{list}}
</div>

并且

function TestController($scope) {
    $scope.list = [ { value: 'value 1' }, { value: 'value 2' }, { value: 'value 3' } ];
}

- franzelunico

Answer 4

AngularJS is giving $index variable. We can use it.     
<ul>
 <li ng-repeat="item in items">{{ $index + 1 }}</li>
</ul>

- Matin malek