使用ng-if表达式

时间:2015-06-15 11:31:03

标签: javascript json angularjs angularjs-ng-repeat angular-ng-if

我有分期付款的银行列表附带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

我不知道我在哪里犯了错误。

1 个答案:

答案 0 :(得分:0)

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

您检查了

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

但是你需要检查typeof属性是否等于undefined,如下所示:

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

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