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
}

修改

这是<a ng-repeat=" ..">

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

从db获取json之后。我把它们放到了美元范围内。

$scope.carts = cart.items;

问题是ng-repeat仅显示具有prod_id:1的第一个项目。 json似乎很好，我不知道我的js和html代码有什么问题。我从alert(JSON.stringify(cart));获取了json输出。

感谢您的帮助。

Answer 1

您没有遍历carts对象中存在的数组。以下是工作代码

      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 2

根据原始帖子中提供的JSON，您的代码工作正常。

<强>样本

＆＃13;

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
        }
    ];
});

＆＃13;

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

＆＃13;

Answer 3

我发现了程序的错误..

[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

很抱歉没有这么快说明。原因是我没有在ng-model <input>内放置<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">

ng-repeat仅显示对象数组中的第一个项目

3 个答案: