javascript - style - Repetición Ng, primer elemento con diferente directiva.

title js

Question

Obtuve el siguiente código:

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

La forma en que hago el primer elemento tiene la directiva bigsquare , mientras que las otras solo tienen square .

He intentado:

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

pero lamentablemente el resultado es:

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

También conocido como el enlace no se compilan.

Answer 1

Puede usar ng-repeat-start y ng-repeat-end siguiente manera:

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>

La documentación se puede encontrar en ng-repeat .

Answer 2

Si no te importa usar otro <div> dentro de tu <li> , deberías poder salir haciendo bloques condicionales de <div> usando ng-if="$index == ??" .

Tal vez algo como esto:

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

Es un poco más detallado, pero separa bien las plantillas para que puedan tenerlas bastante independientes entre sí.

Answer 3

Vea este violín en http://jsfiddle.net/nicolasmoise/xLfmK/2/ .

Puede crear una directiva a la que le pasa una condición. Dependiendo de esa condición, se mostrará el cuadrado o el cuadrado grande como tal.

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

Nota Si no desea modificar las directivas que ya ha creado, siempre puede tener una directiva maestra que llame a las otras dos.

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