web-dev-qa-db-ja.com

ng-repeat、異なるディレクティブを持つ最初のアイテム

私は次のコードを得ました：

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

a.k.a.バインディングはコンパイルされません。

javascriptangularjsangularjs-directiveng-repeat
17
Deepsy

次のようにng-repeat-startとng-repeat-endを使用できます。

angular.module('example', [])
  .controller('ctrl', function Ctrl($scope) {
    $scope.items = [1,2,3];
  }); </ code>
<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 にあります。
 34 
Jan
このフィドルをご覧ください http://jsfiddle.net/nicolasmoise/xLfmK/2/ 。
条件を渡すディレクティブを1つ作成できます。その状態に応じて、正方形または大きな正方形が表示されます。
         <div ng-repeat="repeat in repeater" condition="$first" square></div>

注すでに作成したディレクティブを変更したくない場合は、常にsquareをマスターディレクティブにすることができます。他の2つを呼び出します。
 3 
NicolasMoise
<!-- 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>

 1 
ethanneff