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

【问题标题】：Ng-repeat, first item with different directiveNg-repeat，具有不同指令的第一项
【发布时间】：2014-02-03 21:45:49
【问题描述】：

我得到以下代码：

<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>

又名。绑定不会被编译。

【问题讨论】：

标签： javascript angularjs angularjs-directive ng-repeat

【解决方案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。

【讨论】：

【解决方案2】：

看这个小提琴http://jsfiddle.net/nicolasmoise/xLfmK/2/。

您可以创建一个向其传递条件的指令。根据该条件，它将显示正方形或大正方形。

         <div ng-repeat="repeat in repeater" condition="$first" square></div>

注意如果您不想更改已经制定的指令，您可以随时让square 成为调用其他两个指令的主指令。

【讨论】：

【解决方案3】：

如果您不介意在您的<li> 中使用另一个<div>，您应该可以使用ng-if="$index == ??" 执行<div> 的条件块。

可能是这样的：

<div ng-repeat="i in placeholders">
  <div bigsquare class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index == 0">
    ...
  </div>
  <div mediumsquare class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index == 1">
    ...
  </div>
  <div square class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index > 1">
    ...
  </div>
</div>

它有点冗长，但它很好地分离了模板，这样您就可以让它们彼此完全独立。

【讨论】：

【解决方案4】：

<!-- Here is a code sample which I used in one of my angularjs ionic apps.  -->
<!-- Regular ng-repeat -->
<!-- ng-if="$first" to determine <input focus-input> or not -->
<ion-item class="item item-input item-stacked-label" ng-repeat="input in template.inputs">
  <label class="input-label bh-dark" for="{{input.id}}">{{input.title}}</label>
  <div class="clearfix">
    <div class="bh-left">
      <input ng-if="$first" focus-input id="{{input.id}}" type="{{input.type}}" placeholder="{{input.choices[0]}}" ng-model="input.answer">
      <input ng-if="!$first" id="{{input.id}}" type="{{input.type}}" placeholder="{{input.choices[0]}}" ng-model="input.answer">
    </div>
    <div class="bh-right">
      <i class="icon ion-ios-close-empty bh-icon-clear" ng-click="clearField(input.id)" ng-show="input.answer"></i>
    </div>
  </div>
</ion-item>

【讨论】：