2016-12-16 1 views
1

J'utilise ng-repeat pour lier une image à partir d'une directive (même chose que pour les étoiles). Dans mon cas, j'ai des images, certaines d'entre elles devraient avoir une légende, pas toutes. Y a-t-il un moyen de créer une condition, qui montrera une légende pour les deuxième et dernière images seulement? sans créer un tableau pour toutes les imagesImages ng-repeat angulaires avec légende seulement pour 2 d'entre eux

Mon html:

<ul class="qty"> 
<li ng-repeat="image in imagesArray"> 
    <img ng-model="imgUrl" ng-src="{{imgUrl}}"> 
    <div>caption</div> 
</li> 

Mon application:

var myDirectives = (function() { 
var myDirectives = angular.module('myDirectives', []); 
myDirectives.directive('myImages', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      qty: '=' 
     }, 
     link: function ($scope) { 
      $scope.imgUrl = "http://farm6.staticflickr.com/5579/14671096893_806ec359b7_m.jpg"; 
      $scope.imagesArray = []; 
      for (var i = 0; i < $scope.qty; i++) { 
       $scope.imagesArray.push({}); 
      } 
     }, 
     templateUrl: function() { return 'stars.html' }, 
    } 
}); 
return myDirectives; }()); 

Plunkr: http://plnkr.co/edit/IdXaRDB9INZlZbWSTmam?p=preview

Répondre

1

Oui, vous pouvez utiliser $ last et $ first. Pour plus d'informations, reportez-vous à la documentation ngRepeat.

<ul class="qty"> 
<li ng-repeat="image in imagesArray"> 
    <img ng-model="imgUrl" ng-src="{{imgUrl}}"> 
    <div ng-if="$first || $last">caption</div> 
</li> 
+0

Je l'ai eu! J'ai juste manqué les propriétés à étudier pour ng-repeat. Maintenant, c'est plus clair. Va jouer avec. Je vous remercie! – Natalya

1

Fait, voir ma réponse. Cela fonctionne bien

<ul class="qty"> 
    <li ng-repeat="image in imagesArray track by $index"> 
     <img ng-model="imgUrl" ng-src="{{imgUrl}}"> 
     <div ng-if="$index===1 || $last">caption</div> 
    </li> 
</ul> 
+0

Ah! Impossible de se souvenir si $ index était basé sur zéro ou pas :-) –

+0

Bien sûr, il est basé sur zéro. Vous pouvez utiliser '$ index ===" imagesArray.length-1 "' au lieu de '$ last'. –

+0

Merci! La logique est tout))) Peut jouer avec elle de différentes façons maintenant – Natalya