Link a different component per dynamically generated element

0

I have been trying for a long time to make a ng repeat that for each repeated element insert a component, I was inspecting with track by $ index, but I do not succeed. my code is this:

html

<div class="benefit" ng-repeat='benefit in $ctrl.benefits track by $index'>
    <div class="benefit-description">
        <p class='percentage'>{{benefit.porcentaje}}</p>
        <p class="percentage-detail">{{benefit.title}}.</p>
        <p class="partner">
            <span><img src="app/assets/avatar.png" class="partner-min"></span>
            <span class="partner-name">{{benefit.partnet}}</span>
        </p>
    </div>
    <div class="partner-brand">
        <img src="app/assets/greyimg.png" class="partner-avatar" width="91">
    </div>

    <durability-component></durability-component> 
    <request-component></request-component>
    <favorite-benefit-component></favorite-benefit-component>
</div>

and my component:

(function(){
    'use strict';
        angular
            .module('benefit')
            .component('benefitComponent', {
                bindings: {},
                templateUrl : 'app/benefit/benefit.html',
                controller : benefitCtrl
            })



            function benefitCtrl($scope){

                this.benefits = [
                    {porcentaje: '0%', title: 'orem Ipsum is simply dummy text of the printing', partner:'juan'},
                    {porcentaje: '0%', title: 'orem Ipsum is simply dummy text of the printing and typesetting', partner:'pedro'},
                    {porcentaje: '0%', title: 'orem Ipsum is simply dummy text of the printing and type', partner:'luis'}
                ]
            }
}());

That is, the first div that is repeated, should have only the durability-component, the second the request and the third favorite ... I have tried with ng if and ng show, but I can not get it out .. I do not know what property I should use to be able to achieve it and I do not want to have repeated coded just for this part. Acpet suggestions. thank you very much!

    
asked by Pil 12.10.2018 в 07:08
source

1 answer

0

Finally solve it by putting each component a number at the index

<durability-component ng-if="$index == 0" ></durability-component> 
<request-component ng-if="$index == 1" ></request-component>
<favorite-benefit-component ng-if="$index == 2"></favorite-benefit-component>

Thanks to everyone the same:)

    
answered by 12.10.2018 в 15:43