Brendan Brendan - 11 days ago 6
AngularJS Question

Individual classes for ng-repeat

I'm trying to figure out a clean way to add individual classes to my ng-repeat

<div class="panel-body">
<ul class="instagram-list" id="feed" ng-repeat="item in items track by $index">
<li class="box">
<a ng-href="{{item.link}}" target="_blank">
<small>{{item.caption.text}}</small>
<img ng-src="{{item.images.standard_resolution.url}}" width="294">
</a>
</li>
</ul>
</div>


Where my data is coming from :

app.factory('Instagram', ['$http',
function($http) {
var base = "https://api.instagram.com/v1";
var min_tag_id = null;
// get your own client id http://instagram.com/developer/
var clientId = 'xxxxxxxxxxx';
return {
updateMinTagId: updateMinTagId,
get: function(hashtag) {
var request = '/tags/' + hashtag + '/media/recent?count=8&access_token=xxxxxxx.xxxxxx.xxxxxxx' + (min_tag_id !== null ? '&min_tag_id=' + min_tag_id : '');
console.log('request', request, 'min_tag', min_tag_id);
var url = (min_tag_id == null ? base + request : min_tag_id);
var config = {
'params': {
'callback': 'JSON_CALLBACK'
}
};
return $http.jsonp(url, config);
}
};
function updateMinTagId(ID) {
if (angular.isUndefined(ID)) return;
min_tag_id = ID;
}
}
]);


I've tried to make a sass loop that iterates over each item and basically just adds a number on to the end of each class something like : box-{{}} .However I'm hitting a wall and have no idea what else I could do.

Answer

Updated code by adding the following code to my box element.

ng-class="box-{{$index}}"