How to use an Angular variable to control the index of an angular array?

Question

I need to show some information about an item, and if I click in a list of other items the information must change (not the case right now).

To show the first item of an array is easy if I use 0 between [ ], but if I try to use the $scope.id = 0, nothing happens.

HTML:

                    <div class="col-md-5">
                        <b>{{faturas[{{id}}].faturan}}</b>
                        <p>Vencimento: <span>{{faturas[{{id}}].venc}}</span></p>
                    </div>
                    <div class="col-md-7">
                        <p>Período: {{faturas[{{id}}].ini}} a {{faturas[{{id}}].fim}}</p>
                        <p>Valor: R$ <span>{{faturas[{{id}}].valor}}</span></p>
                    </div>

Node:

var queryString = 'SELECT * from faturas WHERE empID = '+usuarioSession.empID;
connection.query(queryString,function(err,rows)     {  
    var ret = [];              
    for (var i = 0; i < rows.length; i++) {                        
        ret.push ({
            index: i,
            faturan: "Fatura "+(i+1),
            venc: rows[i].fatDataVenc,
            ini: rows[i].fatDataIni,
            fim: rows[i].fatDataFim,
            valor: rows[i].fatValor
        });

    }         
    response.writeHead(200, {'Content-Type': 'application/json'});
    response.end(JSON.stringify(ret), 'utf-8');
});

Angular:

app.controller('faberto',function($scope,$http){
    $scope.id = 0;
    $http.get('/servico/faberto').success(function(data) {
        $scope.faturas = angular.fromJson(data);

    });
});

first of all, you can't use an expression {{ }} inside another expression, so instead of {{faturas[{{id}}].faturan}}, you should use {{faturas[id].faturan}}. However, the larger question is why you wouldn't use ng-repreat for this kind of operation instead of accessing items by their array index. — Claies
– Claies, Commented Jun 14, 2016 at 19:16
@Claies is correct. Use ng repeat and then you can use $index if you truly need the index. Most of the time you don't though. — Bryan Euton
– Bryan Euton, Commented Jun 14, 2016 at 19:21
Thanks guys!! I didn't know that would be better using ng-repeat in this case, usually I use to print all the "list". — Ernany Daniel
– Ernany Daniel, Commented Jun 14, 2016 at 19:25

Pedro Antonio · Accepted Answer · 2016-06-14 19:38:55Z

2

As @Claies said, you can't use a {{ }} inside another one! Check this link: https://plnkr.co/edit/mHNaTXBNfzTGD3T0ujHY

I've created a mock to show you how ng-repeat would be more suitable for the situation!

answered Jun 14, 2016 at 19:38

Pedro Antonio

515 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use an Angular variable to control the index of an angular array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related