带有数组和对象的 ng-repeat答案

【问题标题】：ng-repeat with an array and an object带有数组和对象的 ng-repeat
【发布时间】：2017-06-29 13:24:38
【问题描述】：

我有这样的问题：我想在 AngularJs 中创建一个包含 3 列的表。对于每一行，两个数据必须来自数组“elencoTransazioni”（由每个具有两个属性的元素组成，“code”和“desc”），一个数据必须来自一个由不同的值对组成的对象（如键值，我想在我的第三列中插入这个对象的值）。数组的长度与对象的对数相同。

我发布了我的代码，但它不起作用，因为我管理对象“elencoAbilitazaioni”，就好像它是一个数组一样......

PS 在表格中，如果'elencoAbilitazioni'的值为“S”，则第3列有一个绿色圆圈图像，如果它是“N”，则必须是一个红色圆圈

这是我的 HTML

<form class="form-horizontal" name="SintesiFondiForm" novalidate>
        <div class="panel panel-primary">
            <div class="panel-heading"> Elenco Abilitazioni Utente </div>

            <div class="panel-body" uib-collapse="isCollapsed">
                <div id="table-content" class="col-xs-10 col-xs-offset-1">
                    <table class="table table-condensed table-bordered table-striped">
                        <thead>
                            <tr>
                                <th class="i9fontPre text-center">Codice</th>
                                <th class="i9fontPre text-center">Descrizione</th>
                                <th class="i9fontPre text-center">Abilitata per l'Utente</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="data in elencoTransazioni">
                                <td class="i9fontPre text-center">{{::data.code}}</td>
                                <td class="i9fontPre text-center">{{::data.desc}}</td>  
                                <td class="text-center"> 
                                    <img ng-src="{{elencoAbilitazioni[$index]==='S' ? '/i9web/mock/circleGreen.png' : '/i9web/mock/circleRed.png'}}">

                            </tr>
                        </tbody>
                    </table>
                </div>      
            </div>
        </div>
    </form>

这是.js

homeModel.getElencoTransazioniTrx().then(function(result) {
            $scope.elencoTransazioni = result.descrizioneTrxList;
        }, function(error) {
            $log.error("Pag4Ctrl -- abilitazioneUtente -- non è stato possibile recuperare l'elenco delle transazioni utente");
        });     

        homeModel.getTrxAbil().then(function(result){
            $scope.elencoAbilitazioni = result.trxAbils;
        }, function(error) {
            $log.error("Pag4Ctrl -- abilitazioneUtente -- non è stato possibile recuperare l'elenco delle abilitazioni utente");
        });

谁能帮助我？

【问题讨论】：

尝试从插值中删除 ::
感谢您的回答，但这部分有效！这是第三列不能正常工作...
这不起作用，因为 elencoAbilitazioni[$index] 指向的对象不是值
你可以发布“elencoAbilitazioni”数组或它的一些存根
这是一个对象示例（它不是数组，我希望它是）'elencoAbilitazioni' {'I9WSFONI':'S', 'I9WSFONI':'S', 'I9WSSTAA' :'S', 'I9WSSTAI':'N'}

标签： javascript angularjs arrays html angularjs-ng-repeat

【解决方案1】：

正如你所说，elencoAbilitazioni 不是一个数组，所以你不能按位置索引它。我建议你在控制器中“准备”你的数组elencoTransazioni，将elencoAbilitazioni的相应信息放在每个对象中，如下所示：

var idx = 0;
angular.forEach($scope.elencoAbilitazioni, function (value, key) {
    $scope.elencoTransazioni[idx++].elencoAbilitazioni = value;
}

所以你可以直接在你的代码中使用它，比如：

<img ng-src="{{data.elencoAbilitazioni==='S' ? ...

【讨论】：