i have installments lists of banks comes with json and i want to repeat the list that whetever bank support installment count or not on payment page. list must be count up to 9 starting from 2.
this is the json (includes only first bank)
[{
"Installments": [{
"InstallmentId": 9,
"InstCount": 2,
"InstRate": 0,
"BankId": 1,
"Info": false
}, {
"InstallmentId": 10,
"InstCount": 3,
"InstRate": 0,
"BankId": 1,
"Info": false
}, {
"InstallmentId": 11,
"InstCount": 4,
"InstRate": 7.30,
"BankId": 1,
"Info": false
}, {
"InstallmentId": 12,
"InstCount": 5,
"InstRate": 0,
"BankId": 1,
"Info": false
}, {
"InstallmentId": 13,
"InstCount": 7,
"InstRate": 4.50,
"BankId": 1,
"Info": false
}, {
"InstallmentId": 14,
"InstCount": 9,
"InstRate": 11.28,
"BankId": 1,
"Info": false
}],
"BankId": 1,
"BankName": "Garanti",
"IsInstallments": false,
"BankLogo": "img/bank/cards-01.png"
}, {
"Installments": [...],
"BankId": 2,
"BankName": "Advantage",
"IsInstallments": false,
"BankLogo": "img/bank/cards-05.png"
}, {
"Installments": [...],
"BankId": 3,
"BankName": "Finansbank",
"IsInstallments": false,
"BankLogo": "img/bank/cards-03.png"
}]
this is the html markup:
<div id="installments"
class="{{bankValue !== '' ? 'inactive' : '' }}">
<div class="row m0 row-paddless">
<div class="col-xs-4 col-sm-2"
ng-repeat="bank in json" >
<section data-bank-id="{{bank.BankId}}"
class="bank {{bankValue == bank.BankId ? 'active' : 'inactive' }}">
<div style="background-image: url('{{bank.BankLogo}}');" class="img-holder"></div>
<ul>
<li ng-repeat-start="i in [2,3,4,5,6,7,8,9]"
ng-if="bank.Installments[i-2].InstCount !== i || bank.Installments[i-2].InstCount == undefined">
<p>{{i}} TAKSİT</p>
<p>disabled</p>
<p><small>disabled</small></p>
</li>
<li ng-repeat-end="i in [2,3,4,5,6,7,8,9]"
ng-click="clickLi(ins, bank)"
ng-if="bank.Installments[i-2].InstCount == i" class="{{installmentValue == bank.Installments[i-2].InstCount ? 'active' : '' }} {{bank.Installments[i-2].InstRate == 0 ? 'special' : '' }}">
<p>{{bank.Installments[i-2].InstCount}} TAKSİT</p>
<p><span itemprop="price" class="price-value" ng-init="newPrice = price + (price * bank.Installments[i-2].InstRate / 100)"> {{ newPrice | number:2 }} TL</span></p>
<p ng-init="installedPrice = ((price + (price * bank.Installments[i-2].InstRate / 100)) / bank.Installments[i-2].InstCount)"><span><small> {{ installedPrice | number:2 }} TL X {{bank.Installments[i-2].InstCount}} ay</small></span></p>
</li>
</ul>
</section><!-- "bank" -->
</div><!-- "col-xs-4 col-sm-2" -->
</div><!-- "row" -->
</div><!-- installments -->
this is what i get (screenshot): http://aslanbakan.com/down/bank-error.PNG
this is what i want to achive (screenshot): http://aslanbakan.com/down/bank-achive.PNG
I don't know where i did the mistake.
As far as I can understand, you want to display only those banks that have an Installment.
You checked for
But you need to check the typeof attribute equals undefined, like this:
Updated the pen you provided: http://codepen.io/anon/pen/dozpBE