javascript - ng-click inside ng-repeat 指向兄弟 div 而不是 ng-repeat 中的所有 div

Question

好的，首先是可怕的标题，希望我能在这里更好地解释它。所以我有一个 ng-repeat，在这个 repeat 中有一个包含按钮的 div 和另一个 div。我希望按钮只影响旁边的 div。目前，该按钮会影响循环内的所有 div。

html:

<div ng-repeat="item in menu" ng-show="!$first">
    <div class="col-md-2" back-img="item.img">
        <div ng-controller="buttonController">
            <button ng-click="fadeIt('redbox')">click to fade</button>
            <div class="redbox">fade me</div>
        </div>
    </div>
</div>

我查看了 ng-class，但我无法弄清楚如何让“redbox”类改变它的值(value)以合并 ng-repeat 迭代(所以“redbox1”“redbox2”等)。我还尝试给 redbox div item.title 希望它能以这种方式迭代。没有运气。基本上我希望按钮只改变它的同级 div。

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用 $index 获取 ng-repeat 中元素的索引，因此您可以将 html 更改为:

<div ng-repeat="item in menu" ng-show="!$first">
    <div class="col-md-2" back-img="item.img">
        <div ng-controller="buttonController">
            <button ng-click="fadeIt('redbox' + $index)">click to fade</button>
            <div class="redbox{{$index}}">fade me</div>
        </div>
    </div>
</div>