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!