ng-repeat僅顯示對象數組中的第一個項目

Question

我正在使用cordova應用程序，該應用程序將顯示來自設備的sqlite數據庫的購物車中的項目列表。我實際上爲此項目使用cordova-sqlite-plugin。

這是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

這是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

的 <a ng-repeat=" ..">一個完整內容

$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"); 
}); 

從db中獲取json之後。我把它們放在$ scope中。

$scope.carts = cart.items; 

的問題是NG-重複只顯示其具有prod_id:1第一個項目。 json似乎很好，我不知道我的js和html代碼似乎有什麼問題。我已經從alert(JSON.stringify(cart));取得json輸出。

感謝您的幫助。

Answer 1

我發現程序的錯誤..

[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 

對不起，這麼快，說明。原因是我沒有在<input>裏面輸入ng-model，這個在<a ng-repeat=' ..'>裏面。所以我把它改成：

<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

您不在循環購物車對象內部的數組。下面是工作的代碼

 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

您的代碼工作正常，按在原崗位提供的JSON。

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>