Search code examples
angularjsangularjs-ng-repeatng-class

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.


Solution

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

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