当列出3时，ANGULARJS结果消失

Question

My query search all the dishes that the restaurant has on it's database.

<?php
include('base.php');
$data = array();
$result = mysql_query("SELECT nombre FROM platos WHERE tipo = 'principal'",$connect);
if(mysql_num_rows($result) > 0){
    while($row = mysql_fetch_assoc($result)){
        $data[] = $row;
    }
} else {
    echo "0 results";
};
echo json_encode($data);
mysql_close($connect);
?>

so then I invoke it on the angular code:

$http({
      method: 'GET',
      url: '../../php/getDishesPrincipal.php'
    }).then(function successCallback(response) {
        $scope.principals = response.data;
    }, function errorCallback(response) {
        $scope.principals = 'No Response';
    });

well, finally i print it on my html code:

<div id="agregarpedido_table_item" ng-repeat="principal in principals">
   <p id="agregarpedido_table_item_p">{{principal.nombre}}</p>
   <div id="agregarpedido_table_item_command">
     <p>{{principal.cant}}</p>
     <div class="selectors">
       <input type="button" value="+" ng-click="principal.cant = principal.cant + 1">
       <input type="button" value="-" ng-click="principal.cant = principal.cant - 1">
     </div>
   </div>

The issue is that when in my database theres more than 2 results that matches tipo: principal, the html disappears and it doesn`t show anything. Worst, the console doesn't throw any error about it as if it is normal. Any ideas?

Answer 1

Because you are only getting back an array of names due to your SQL query, angular may be throwing a no-dupes error inside the ng-repeat.

Try formatting your ng-repeat like this: ng-repeat="principal in principals track by $index"

you may have 2 or more non-unique names for your principals, so angular throws a no dupe error. For reference, using the track by $index method can help improve render/binding performance in loops.

here's a jsbin https://jsbin.com/noxawusoqe/2/edit?html,js,console,output

Hope that works