将angular与嵌套ng重复使用:

Using angular with nested ng-repeat:

本文关键字：ng angular 嵌套      更新时间：2023-09-26

我有一个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>

如果您不是真的想遍历颜色数组，您可以通过一个表达式来分配类。让我知道这个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>

不要试图用ng-repeat在colorArray上循环，只需将ngClass与一个将产生一个颜色类的表达式一起使用即可。要使其循环使用，可以使用表达式albumIndex%colorArrayLength（索引余数数组长度）来获得正确的索引。

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

作为自动填充的可变角度的$index将填充ng个重复的当前索引（在这种情况下是相册阵列的索引）。

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>

相关文章：