Ng-repeat, premier article avec différents directive

J'ai le code suivant:

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

Comment je fais le premier élément a de la directive bigsquare, tandis que les autres ont juste square.

J'ai essayé:

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

mais malheureusement j'ai le résultat est:

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

un.k.un. la liaison n'est pas compilé.

InformationsquelleAutor Deepsy | 2014-02-03
  1. 34

    Vous pouvez utiliser ng-repeat-start et ng-repeat-end comme suit:

    

    

    angular.module('example', [])
  .controller('ctrl', function Ctrl($scope) {
    $scope.items = [1,2,3];
  });
    


    

    

    <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>
  2. 3

    Voir ce violon http://jsfiddle.net/nicolasmoise/xLfmK/2/.

    Vous pouvez créer une directive à laquelle vous passez d'un état. Selon cette condition, il va afficher le carré ou la grand-place en tant que tel.

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

    Note
    Si vous ne voulez pas modifier les directives que vous avez déjà fait, vous pouvez toujours avoir square être un maître de la directive qui appelle les deux autres.

    InformationsquelleAutor NicolasMoise
  3. 2

    Si vous n'avez pas l'esprit en utilisant un autre <div> à l'intérieur de votre <li>, vous devriez être en mesure de s'en sortir en faisant des blocs conditionnels de <div> à l'aide de ng-if="$index == ??".

    Peut-être quelque chose comme ceci:

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

    C'est un peu plus détaillé, mais il sépare bien les modèles de sorte que vous pouvez avoir assez indépendants les uns des autres.

    InformationsquelleAutor subdigit
  4. 1
    <!-- 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>
    InformationsquelleAutor ethanneff