Question

我有一个ng-repeat，我想在数组（相册数组）上添加项目，这很好。我有颜色数组，它会为相册数组的卡元素添加不同的背景颜色。结果是不正确的，我已经尝试使颜色数组在同一个数组上的对象仍然得到错误的结果。任何帮助赞赏。这是CodePen。彩色数组应循环回来，以等于相册数组中任意数量的相册。

function MainController(albumSerivce, $filter) {
  'use strict';

  var ctrl = this;
  ctrl.albums = [];
  ctrl.arrayColor = ['red', 'blue', 'green', 'yellow'];
}

.green {
  background-color: rgb(75, 175, 79);
  padding: 10px;
}
.red {
  background-color: rgb(255, 86, 34);
  padding: 10px;
}
.blue {
  background-color: rgb(61, 121, 182);
  padding: 10px;
}
.yellow {
  background-color: rgb(255, 255, 0);
  padding: 10px;
}

<body ng-app="app">
  <div class="container-fluid" ng-controller="MainController as ctrl">
    <div class="albums-container" ng-repeat="album in ctrl.albums" ng-cloak>
      <div class="album {{color}}" ng-repeat="color in ctrl.arrayColor">
        <img class="image" ng-src="{{album.url}}" alt="" />
        <div class="title">{{album.title}}</div>
      </div>
    </div>
  </div>
</body>

更新，我也尝试过这样做。无法弄明白。

<!-- Also tried doing different template with class included and using ng-if with modulus if this mightbe the better route? -->
<div ng-class="album green" ng-if="$index%">
  <img class="image" ng-src="{{album.url}}" alt="" />
  <div class="title">{{album.title}}</div>
</div>
<div ng-class="album red" ng-if="$index%">
  <img class="image" ng-src="{{album.url}}" alt="" />
  <div class="title">{{album.title}}</div>
</div>
<div ng-class="album blue" ng-if="$index%">
  <img class="image" ng-src="{{album.url}}" alt="" />
  <div class="title">{{album.title}}</div>
</div>
<div ng-class="album yellow" ng-if="$index%">
  <img class="image" ng-src="{{album.url}}" alt="" />
  <div class="title">{{album.title}}</div>
</div>

Answer 1

如果你真的不想通过颜色数组进行迭代，你可以通过表达式分配类。如果This CodePen适合您，请告诉我。

<div class="album {{ctrl.arrayColor[$index%ctrl.arrayColor.length]}}" >
        <img class="image" ng-src="{{album.url}}" alt="" />
        <div class="title">{{album.title}}</div>
</div>

Answer 2

不要试图使用colorArray遍历ng-repeat，而只需使用带有表达式的ngClass，该表达式将导致您的某个颜色类。要使其成为循环法，您可以使用表达式albumIndex%colorArrayLength（索引remainder数组长度）来获取正确的索引。

ng-class="colorArray[$index%colorArray.length]"

$index是自动填充的变量angular将填充ng-repeat的当前索引（在这种情况下是相册数组的索引）。

angular.module("app",[]).controller("ctrl",function($scope){
  $scope.colorArray = ['green','red','blue','yellow'];
  $scope.albums =[{
    title:"Kitten 1",
    url:"https://placekitten.com/g/100/100"
  },
  {
    title:"Kitten 2",
    url:"https://placekitten.com/g/100/100"
  },
  {
    title:"Kitten 3",
    url:"https://placekitten.com/g/100/100"
  },
  {
    title:"Kitten 4",
    url:"https://placekitten.com/g/100/100"
  },
  {
    title:"Kitten 5",
    url:"https://placekitten.com/g/100/100"
  },
  {
    title:"Kitten 6",
    url:"https://placekitten.com/g/100/100"
  }];
});

#container{ display:flex; }
.album { flex: 1 1 0; }
.album img { max-width: 100%; }
.green {
  background-color: rgb(75, 175, 79);
  padding: 10px;
}
.red {
  background-color: rgb(255, 86, 34);
  padding: 10px;
}
.blue {
  background-color: rgb(61, 121, 182);
  padding: 10px;
}
.yellow {
  background-color: rgb(255, 255, 0);
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="container" ng-app="app" ng-controller="ctrl">
  <div class="album" ng-class="colorArray[$index%colorArray.length]" ng-repeat="album in albums">
    <img class="image" ng-src="{{album.url}}" alt="" />
    <div class="title">{{album.title}}</div>
  </div>
</div>

使用带有嵌套ng-repeat的angular：

2 个答案: