使用角度嵌套ng-repeat：

我有一個ng重複，我想添加項目的數組（專輯陣列），它工作正常。我有顏色數組，它會爲專輯陣列的卡片元素添加不同的背景顏色。結果是不正確的，我試圖使顏色數組對象在同一個數組仍然得到錯誤的結果。任何幫助讚賞。這裏是CodePen。顏色數組應循環回來以等於專輯陣列中任意數量的專輯。使用角度嵌套ng-repeat：

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>

來源

2016-05-03 alphapilgrim

代碼筆拋出一個意外的標記錯誤我現在 –

嘗試@NarainMittal它。 – alphapilgrim

當專輯比彩色更多時應該發生什麼？它是否應該從顏色數組的開始迴繞？如果是這樣，爲什麼不在你的css類中使用類似於第n個子類型的css選擇器 –

如果你不是真的想迭代通過顏色數組，你可以通過表達式來指定類。讓我知道如果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>

來源

2016-05-03 22:09:31

謝謝！ Perfecto，正是我所期待的。 – alphapilgrim

，而不是試圖遍歷所有的colorArray有ng-repeat只需使用ngClass用，這將導致你的顏色類別之一的表達。要使其循環，可以使用表達式albumIndex%colorArrayLength（索引remainder數組長度）來獲取正確的索引。

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>

來源

2016-05-03 22:14:00

謝謝！到底我在找什麼，只是@narain先回答。希望我能給他們兩個獲獎的答案。 – alphapilgrim

使用角度嵌套ng-repeat：

回答

相關問題