使用 ng-repeat 在生成的 div 中添加生成的内容

Question

我正在尝试使用 ng-repeat 来实现这一点

<div class="lightlighten seperatediv">
   <label class="item item-radio">
   <input type="radio" name="group">
      <img ng-src="img/avatars/1.png" />
   </label>
    <label class="item item-radio">
   <input type="radio" name="group">
      <img ng-src="img/avatars/1.png" />
   </label>
    <label class="item item-radio">
   <input type="radio" name="group">
      <img ng-src="img/avatars/1.png" />
   </label>
    <label class="item item-radio">
   <input type="radio" name="group">
      <img ng-src="img/avatars/1.png" />
   </label>
    <label class="item item-radio">
   <input type="radio" name="group">
      <img ng-src="img/avatars/1.png" />
   </label>
    <label class="item item-radio">
   <input type="radio" name="group">
      <img ng-src="img/avatars/1.png" />
   </label>
    <label class="item item-radio">
   <input type="radio" name="group">
      <img ng-src="img/avatars/1.png" />
   </label>
</div>

<div class="darklighten seperatediv">
    <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
</div>

<div class="lightlighten seperatediv">
    <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
</div>

<div class="darklighten seperatediv">
    <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
     <label class="item item-radio">
    <input type="radio" name="group">
       <img ng-src="img/avatars/1.png" />
    </label>
</div>

注意div的class属性的变化（lightlighten和darklighten）。

一开始看起来并不难，但是当我开始使用 ng-repeat 时，事情变得相当复杂。

ng-repeat（或其他类型的方法）应该做什么： 每 7 个项目（非变量）创建一个新的 div，更改类名（lightlighten/darklighten），并在“新鲜”的 div 中添加新项目。

我已经编码了，但最重要的部分显然丢失了

<div ng-repeat="image in allImages">
                <label class="item item-radio">
                <input type="radio" name="group" ng-click="changeAvatar(image.id)" ng-checked={{image.active}}>
                  <img ng-src={{image.src}} />
                </label>
              </div>

可以像这样生成一个类。这是一个示例，但可能需要它来完成此操作。

ng-class="{ 'darklighten': $index % 2 == 0}"

有人可以帮我解决这个问题或指出正确的方向吗？

Answer 1

尝试像这样使用$even 上下文变量

<div ng-repeat="image in allImages" ng-class="{'dark': $even, 'light' : $odd}"> </div>