使用 ng-if 表达式进行多次 ng-repeat

Question

我有 json 附带的银行分期付款列表，我想在付款页面上重复无论银行是否支持分期付款计数的列表。列表必须从 2 开始计数到 ​​9。

这是 json（仅包括第一家银行）

    [{
      "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"
    }]

这是 html 标记：

    <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 -->

这是我得到的（截图）： http://aslanbakan.com/down/bank-error.PNG

这就是我想要实现的（截图）： http://aslanbakan.com/down/bank-achive.PNG

我不知道我在哪里做错了。

Answer 1

据我所知，您只想显示那些有分期付款的银行。

你检查了

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

但是你需要检查 typeof 属性是否等于 undefined，像这样：

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

更新了你提供的笔：http://codepen.io/anon/pen/dozpBE