ng-repeat zeigt nur das erste Element aus dem Objekt-Array an

Question

Ich arbeite mit einer cordova App, die die Liste der Artikel im Warenkorb anzeigt, die aus der sqlite Datenbank des Geräts stammen. Ich verwende tatsächlich cordova-sqlite-plugin für dieses Projekt.

Dies ist der Ausgang json

{ 
    "items": [ 
     { 
      "prod_id": 1, 
      "prod_name": "2 in 1 Retractable USB cable 2", 
      "prod_price": 299, 
      "prod_img": "img/prod/2_in_1_retractable.png", 
      "discount": 50, 
      "quantity": 1 
     }, 
     { 
      "prod_id": 2, 
      "prod_name": "2 in 1 Screen Protector", 
      "prod_price": 199, 
      "prod_img": "img/prod/2_in_1_screen_protector", 
      "discount": 50, 
      "quantity": 1 
     }, 
     { 
      "prod_id": 3, 
      "prod_name": "3 in 1 USB Charging cable", 
      "prod_price": 199, 
      "prod_img": "img/prod/usb_charging_cable.png", 
      "discount": 50, 
      "quantity": 1 
     } 
    ], 
    "count": 11 
} 

EDIT

Dies ist eine der komplette Inhalt des <a ng-repeat=" .."> im html

<a class="item item-thumbnail-left item-button-right" href="#" ng-repeat="cart in carts"> 
     <img src="http://{{host}}/{{cart.prod_img}}"> 
     <h2>{{cart.prod_name}}</h2> 
     <p>Php {{cart.prod_price}}</p> 
     <button class="button-positive mini-button button-small" style="margin-top: 9px" 
     ng-click="change_quantity('inc', $index, cart.prod_id, cart.prod_price, cart.discount, cart.order_limit, cart.invntry_qty)"> 
     <i class="icon ion-plus"></i> 
     </button> 
     <input type="number" class="mini-input" style="margin-top: 9px" ng-change="alert('quantity_inputted');" 
     ng-model-options="{debounce:1000}"> 
     <button class="button-positive button-small mini-button" style="margin-top: 9px; margin-right: 8px;"><i class="icon ion-minus"></i></button> 
     <button class="button-small button-positive remove icon-left ion-trash-b" style="margin-top: 9px" 
     ng-click="remove_to_cart(cart.prod_id)">&nbspRemove</button> 
    </a> 

controller.js

$cordovaSQLite.execute(db, "SELECT prod_id, prod_name, prod_price, prod_img, discount, quantity FROM cart;") 
.then(function(res) { 

    if (res.rows.length > 0) { 
    cart.items = new Array(); 
    for (var i = 0; i < res.rows.length; i++) { 
     cart.items.push({ 
     prod_id: res.rows.item(i).prod_id, 
     prod_name: res.rows.item(i).prod_name, 
     prod_price: res.rows.item(i).prod_price, 
     prod_img: res.rows.item(i).prod_img, 
     discount: res.rows.item(i).discount, 
     quantity: res.rows.item(i).quantity 
     }); 
    } 
    $scope.$broadcast('scroll.refreshComplete'); 
    cart.count = cart.items.length; 
    alert(JSON.stringify(cart)); 
    alert("cart count: " + cart.items.length); 
    } 
    alert("app.js - Success Fetching Cart"); 
    console.log("app.js - Success Fetching Cart"); 
}, function(error) { 
    console.log("app.js - Failed Fetching Cart"); 
}); 

Nach dem Abrufen der JSON von db. Ich setze sie auf $ scope.

$scope.carts = cart.items; 

Das Problem ist die ng-Wiederholung nur das erste Element angezeigt werden, die die prod_id:1 hat. Die json scheint gut und ich weiß nicht, was mit meinem js und html Code falsch scheint. Ich habe Json-Ausgabe von der alert(JSON.stringify(cart)); genommen.

Vielen Dank für Hilfe.

Answer 1

ich den Fehler des Programms gefunden haben ..

[INFO:CONSOLE(20434)] "Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngChange', can't be found! 
http://errors.angularjs.org/1.3.13/$compile/ctreq?p0=ngModel&p1=ngChange 

Sorry für die nicht so bald besagt. Der Grund dafür ist, dass ich keine ng-model in die <input> gesetzt habe, die innerhalb der <a ng-repeat=' ..'> ist. Also änderte ich es in:

<input type="number" 
class="mini-input" 
style="margin-top: 9px" 
ng-change="alert('quantity_inputted');" 
ng-model-options="{debounce:1000}" 
ng-model="cart.quantity"> 

Answer 2

Sie durchlaufen nicht das Array, das im Wagenobjekt vorhanden ist. Im Folgenden wird der Arbeitscode

 var myapp = angular.module("app",[]); 
 
     myapp.controller("displayCarts",function($scope){ 
 

 
      $scope.carts = { 
 
    "items": [ 
 
     { 
 
      "prod_id": 1, 
 
      "prod_name": "2 in 1 Retractable USB cable 2", 
 
      "prod_price": 299, 
 
      "prod_img": "img/prod/2_in_1_retractable.png", 
 
      "discount": 50, 
 
      "quantity": 1 
 
     }, 
 
     { 
 
      "prod_id": 2, 
 
      "prod_name": "2 in 1 Screen Protector", 
 
      "prod_price": 199, 
 
      "prod_img": "img/prod/2_in_1_screen_protector", 
 
      "discount": 50, 
 
      "quantity": 1 
 
     }, 
 
     { 
 
      "prod_id": 3, 
 
      "prod_name": "3 in 1 USB Charging cable", 
 
      "prod_price": 199, 
 
      "prod_img": "img/prod/usb_charging_cable.png", 
 
      "discount": 50, 
 
      "quantity": 1 
 
     } 
 
    ], 
 
    "count": 11 
 
}; 
 

 
     }); 
 

 

 

 

<html> 
 

 
    <head> 
 
     <title>AngularJS HTML DOM</title> 
 
    </head> 
 

 
    <body> 
 

 

 
     <h2>AngularJS Sample Application</h2> 
 

 
     <div ng-app = "app" ng-controller="displayCarts"> 
 

 
     <a class="item item-thumbnail-left item-button-right" href="#" ng-repeat="cart in carts.items"> 
 
    <h2>{{cart.prod_name}}</h2> 
 
    <p>Php {{cart.prod_price}}</p> 
 
</a> 
 

 

 
     </div> 
 

 
     <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
     
 
    </body> 
 
</html>

Answer 3

Ihr Code funktioniert gut gemäß der JSON in der Original-Post.

DEMO

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.carts = [ 
 
     { 
 
      "prod_id": 1, 
 
      "prod_name": "2 in 1 Retractable USB cable 2", 
 
      "prod_price": 299, 
 
      "prod_img": "img/prod/2_in_1_retractable.png", 
 
      "discount": 50, 
 
      "quantity": 1 
 
     }, 
 
     { 
 
      "prod_id": 2, 
 
      "prod_name": "2 in 1 Screen Protector", 
 
      "prod_price": 199, 
 
      "prod_img": "img/prod/2_in_1_screen_protector", 
 
      "discount": 50, 
 
      "quantity": 1 
 
     }, 
 
     { 
 
      "prod_id": 3, 
 
      "prod_name": "3 in 1 USB Charging cable", 
 
      "prod_price": 199, 
 
      "prod_img": "img/prod/usb_charging_cable.png", 
 
      "discount": 50, 
 
      "quantity": 1 
 
     } 
 
    ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <a class="item item-thumbnail-left item-button-right" href="#" ng-repeat="cart in carts"> 
 
    <h2>{{cart.prod_name}}</h2> 
 
    <p>Php {{cart.prod_price}}</p> 
 
</a> 
 
</div>