How to mount a ng-repeat using track by?

Question

How to mount a ng-repeat using track by?

Navigation

#1 by (1 votes)

1

I have the following HTML

<div class="col-md-4">
    <div class="exibeUnidades">
        <table width="400">
            <thead>
                <tr>
                    <td width="100"><b>Profissionais</b></td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="pro in profissionais track by name">
                    <td width="100"><a href="#agendaProfissional/{{pro.idprofissional}}">{{pro.nome}}</a></td>
                    <td width="160">{{pro.funcao}}</td>
                    <td width="160">{{pro.unidade}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

I'm doing the following query in the database:

<?php
$idestabel = $_GET['idestabel'];

    $getPro=$pdo->prepare("SELECT * FROM unidade INNER JOIN profissional 
                          ON profissional.idunidade = unidade.idunidade WHERE idestabelecimento=:idestabel");
    $getPro=bindValue(":idestabel", $idestabel);
    $getPro->execute();

    while ($linhaPro=$getPro->fetch(PDO::FETCH_ASSOC)) {

        $idunidade = $linhaPro['idunidade'];
        $unidade = $linhaPro['unidade'];
        $idprofissional = $linhaPro['idprofissional'];
        $idunidade = $linhaPro['idunidade'];
        $nome = $linhaPro['nome'];
        $funcao = $linhaPro['funcao'];

        $return[] = array(
            'idprofissional'    => $idprofissional,
            'nome'  => $nome,
            'funcao'    => $funcao,
            'unidade'   => $unidade
        );


    }
?>

My controller:

app.controller("ProfissionaisCtrl", ['$scope', '$http', '$window', '$location', '$rootScope', function ($scope, $http, $window, $location, $rootScope) {

$rootScope.idestabelecimento = localStorage.getItem('idestabelecimento');

var getPro = function(){
    var idestabel = $rootScope.idestabelecimento;
    var opcao = 3 // Buscar profissionais
    $http.get("http://reservacomdomanda.com/areaAdmin/api/admin_estabelecimento/profissionais.php?opcao="+opcao+"&idestabel="+idestabel).success(function(response){
        $scope.profissionais = response;
    })
}

getPro();

}]);

I get this back:

Andthisisthemessagethatappearsintheconsole:

angular.js:12477Error:[ngRepeat:dupes]Duplicatesinarepeaterarenotallowed.Use'trackby'expressiontospecifyuniquekeys.Repeater:proinprofessionaltrackbyname,Duplicatekey:undefined,Duplicatevalue:b

Returnfromconsole.log(response)att:Sorack

php javascript angularjs

asked by anonymous 16.08.2017 / 20:21

1 answer

Show Thumbnails of a particular wordpress page Restart service at low priority in the third core in C #

score 1 · Answer 1

ngRepeat - Error - dupes

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: {0}, Duplicate key: {1}, Duplicate value: {2}

Occurs if there are duplicate keys in an ngRepeat expression. Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items

Free translation:

Duplicados na repetição não são permitidos. Use a expressão 'track by' para especificar chaves únicas. Repetidos: {0}, Chave duplicada: {1}, Valor Duplicado: {2}

Occurs if there are duplicate keys in the ngRepeat expression. Duplicate keys are banned because AngularJS uses the keys to associate the nodes of DOM with the items.

Its name attribute does not exist in the object, so it is going repeatedly as undefined . You can not use an attribute that can be repeated in track by . You can use another field as below:

<tr ng-repeat="pro in profissionais track by pro.idprofissional">

Or use $index :

<tr ng-repeat="pro in profissionais track by $index">

Or, if you guarantee that the professional's name will not be repeated:

<tr ng-repeat="pro in profissionais track by pro.nome">

Remembering that track by is used to improve performance for traversing objects in DOM .