ng-repeat with an array and an object

Question

I have a problem like this: I would like to create a table in AngularJs with 3 columns. For each row, two data must come from an array 'elencoTransazioni' (made by elements that have two attributes each one, 'code' and 'desc') and one data must come from an object, composed of different couples of values (like keys-values, and I want to insert in my third column the values of this object). The lengths of the arrays are the same that the number of the object's couples.

I posted my code, that doesn't work because I managed the object 'elencoAbilitazaioni' as if it were an array...

PS In the table, the 3rd column has a green circle image if the value of 'elencoAbilitazioni' is "S" and must be a red circle if it is "N"

This is my 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>

And this is the .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");
        });

Can anyone help me?

Thanks for the answer, but that part works! It's the third column that does not work properly... — Raul, Jun 29 '17 at 13:35
this is not working because elencoAbilitazioni[$index] is pointing to an object not a value — Ashish Yadav, Jun 29 '17 at 13:37
can u post "elencoAbilitazioni" array as well or some of its stub — Ashish Yadav, Jun 29 '17 at 13:38
This is an example of the object (it is not an array, I wish it was) 'elencoAbilitazioni' {'I9WSFONI':'S', 'I9WSFONI':'S', 'I9WSSTAA':'S', 'I9WSSTAI':'N'} — Raul, Jun 29 '17 at 13:44
go here https://stackoverflow.com/questions/15127834/how-can-i-iterate-over-the-keys-value-in-ng-repeat-in-angular — Ashish Yadav, Jun 29 '17 at 13:51
But I have already another variable (elencoTransazioni) inside ng-repeat directive. I can't have two, right? Do I have to create another ng-repeat...? — Raul, Jun 29 '17 at 14:00

score 1 · Accepted Answer · answered Jun 30 '17 at 17:39

As you say, elencoAbilitazioni is not an array so you can't index it by position. I suggest you to 'prepare' your array elencoTransazioni in the controller putting the corresponding information of elencoAbilitazioni in each object, like this:

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

So you can use it directly in your code, like:

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

ng-repeat with an array and an object

1 Answers1