Ernany Daniel Ernany Daniel - 4 months ago 5x
AngularJS Question

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

I'm stuck in a part of a project that I need to show some informations of an item, and if I click in a list of other items the informations 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 $ = 0, nothing happens.


<div class="col-md-5">
<p>Vencimento: <span>{{faturas[{{id}}].venc}}</span></p>
<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>


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');


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



As @Claies said, you can't use a {{ }} inside another one! Check this link:

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