【问题标题】:Display the group values using angular js..?使用角度js显示组值..?
【发布时间】:2015-10-04 01:21:22
【问题描述】:

现在我已经创建了一个这样的脚本。

$scope.newsample = { 
    1 : [
    {'SUPNAME' : 'HABIB','PKSLIP' : '17193','PRDCODE' : '52003','ITMDESG' : '2550','ITMCODE' : 'IAC1552072','iv' : '1'},
    ],
    2 : [
    {'SUPNAME' : 'EKJOT','PKSLIP' : '55414','PRDCODE' : '52236','ITMDESG' : '420','ITMCODE' : 'IBD5243688','iv' : '2'},
    {'SUPNAME' : 'EKJOT','PKSLIP' : '55414','PRDCODE' : '52236','ITMDESG' : '426','ITMCODE' : 'IBD5243661','iv' : '3'},
    {'SUPNAME' : 'EKJOT ','PKSLIP' : '55414','PRDCODE' : '52236','ITMDESG' : '428','ITMCODE' : 'IBD5243709','iv' : '4'},
    ],
    3 : [
    {'SUPNAME' : 'JAYSONS','PKSLIP' : '50225','PRDCODE' : '53554','ITMDESG' : '6089','ITMCODE' : 'IBC4745296','iv' : '5'},
    ]
}
$scope.total = [
    {'iv' : '1'},
    {'iv' : '2'},
    {'iv' : '3'},
    ]

现在我怎样才能以这种格式显示它。

SUPNAME:HABIB  PKSLIP:17193
ITMDESG:IAC1552072

SUPNAME:EKJOT   PKSLIP=55414
ITMDESG:IBD5243688  ITMDESG:IBD5243661 ITMDESG3:IBC4745296

SUPNAME:JAYSONS  PKSLIP:50225
ITMDESG:IBC4745296

我试过这样,但 SUPNAME 也重复给出一些想法,我如何使用 ng-if 跳过相同的 SUPNAME。我需要显示一次 SUPNAME,并且应该以分组格式显示相应的 ITMDESG。

<div ng-repeat="tot_grp in total " ng-init="subval=newsample[tot_grp.iv]">
    <div ng-repeat = "grp_val in subval">
        <div>
        <label>{{{{grp_val.SUPNAME}}}}</label>
        <label>{{{{grp_val.PKSLIP}}}}</label>
        </div>
        <div style="clear:both"></div>
        <div>
        <label>{{{{grp_val.ITMDESG}}}}</label>
        </div>
    </div>
</div>

【问题讨论】:

    标签: javascript angularjs data-binding angularjs-ng-repeat ng-repeat


    【解决方案1】:

    您可以将$first 用于内部ng-repeat

    标记

    <div ng-repeat = "grp_val in subval">
        <div ng-if="$first">
          <label>{{grp_val.SUPNAME}}</label>
          <label>{{grp_val.PKSLIP}}</label>
        </div>
        <div style="clear:both"></div>
        <div>
        <label>{{grp_val.ITMDESG}}</label>
        </div>
    </div>
    

    【讨论】:

    • 它的工作谢谢你,第一组之后第二组应该进入第二行。我该怎么做?
    • @Pravin 很高兴帮助你..谢谢 :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-03-20
    • 1970-01-01
    • 2015-12-02
    • 1970-01-01
    • 2023-04-09
    • 1970-01-01
    • 2015-05-09
    相关资源
    最近更新 更多