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（或其他一种方法）应该做什么：使用更改的类名（lightlighten / darklighten）每7个项目（不可变）创建一个新div，并在“freshed”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>

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

1 个答案: