Ng-repeat, first item with different directive
angularjs, angularjs-directive, angularjs-ng-repeat, javascript
Solution
You can use `ng-repeat-start` and `ng-repeat-end` as follows:
angular.module('example', [])
.controller('ctrl', function Ctrl($scope) {
$scope.items = [1, 2, 3];
})
.directive('big', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.css('font-size', '30px');
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="example" ng-controller="ctrl">
<div ng-repeat-start="item in items" ng-if="$first" big>
big item {{item}}
</div>
<div ng-repeat-end ng-if="!$first">
item {{item}}
</div>
</div>
The documentation can be found under ng-repeat.
Problem
I got the following code: ``` <div ng-repeat="i in placeholders" square class="set-holder {{i.class}}" droppable="{{i.type}}"></div> ``` How I make the first item has the directive `bigsquare`, while the others have just `square`. I've tried: ``` <div ng-repeat="i in placeholders" {{= $first ? 'big' : ''}}square class="set-holder {{i.class}}" droppable="{{i.type}}"></div> ``` but sadly I the result is: ``` <div ng-repeat="i in placeholders" {{= $first ? 'big' : ''}}square class="set-holder test" droppable="3"></div> ``` a.k.a. the binding don't get compiled.