multiple ng-repeat with ng-if expression

Question

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.

Answer 1

As far as I can understand, you want to display only those banks that have an Installment.

You checked for

bank.Installments[i-2].InstCount == undefined

But you need to check the typeof attribute equals undefined, like this:

typeof bank.Installments[i-1].InstCount === 'undefined'

Updated the pen you provided: http://codepen.io/anon/pen/dozpBE