javascript - Ng-repeat，具有不同指令的第一项

Question

我得到以下代码:

<div ng-repeat="i in placeholders" square class="set-holder {{i.class}}" droppable="{{i.type}}"></div>

我如何制作第一项具有指令 bigsquare ，而其他人只有 square .

我试过了:

<div ng-repeat="i in placeholders" {{= $first ? 'big' : ''}}square class="set-holder {{i.class}}" droppable="{{i.type}}"></div>

但可悲的是我的结果是:

<div ng-repeat="i in placeholders" {{= $first ? 'big' : ''}}square class="set-holder test" droppable="3"></div>

又名绑定(bind)没有被编译。

Answer 1

您可以使用 ng-repeat-start和 ng-repeat-end如下:

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>

文档可在 ng-repeat 下找到.