将属性显示为推送的值（AngularJS）

Question

我正在开展一个商店项目，您可以在其中将商品添加到购物车，并且在购物车中您可以增加或减少您想要拥有的商品数量（数量）。

我无法访问数量属性并将其显示为购物车中的值。

我的问题是我如何能够访问这个数量属性并显示它。

我在下面添加了链接到我的问题的代码，我也是 StackOverflow 的新手，因此对于将所有代码放入一个代码片段给您带来的任何不便，我深表歉意。

// Here is the controller used for the cart HTML page.

app.controller('cartCtrl', function($scope, $rootScope) {
  $scope.cartItems = $rootScope.cartItems;
  $scope.decreaseValue = function() {
    $rootScope.cartItems.Quantity--;
  };
  $scope.increaseValue = function() {
    $rootScope.cartItems.Quantity++;
  }

});

// Here is the controller used in the shop HTML page.

app.controller('shopCtrl', function($scope, $rootScope) {
  $scope.shopItems = $rootScope.shopItems;
  $scope.addToCart = function(item) {
    var cItem = {
      ID: item.ItemID,
      Image: item.Image,
      Name: item.Name,
      Price: item.Price,
      Quantity: 1
    };
    $rootScope.cartItems.push(cItem);
    for (var i = 0; i < cItem.length; i++) {
      if (cItem.ID[i] === item.ItemID) {
        cItem.Quantity++;
      }
    }
  }
});

// Here is the main script file to access routes and other global arrays/objetcs.

var app = angular.module('storeApp', ["ngRoute"]);

app.config(function($routeProvider) {
  $routeProvider.when('/', {
    controller: 'homeCtrl',
    templateUrl: 'templates/home.html'
  }).when('/shop', {
    controller: 'shopCtrl',
    templateUrl: 'templates/shop.html'
  }).when('/adminlogin', {
    controller: 'adminCtrl',
    templateUrl: 'templates/adminLogin.html'
  }).when('/admin', {
    controller: 'adminCtrl',
    templateUrl: 'templates/admin.html'
  }).when('/cart', {
    controller: 'cartCtrl',
    templateUrl: 'templates/cart.html'
  }).when('/contact', {
    controller: 'contactCtrl',
    templateUrl: 'templates/contact.html'
  });
});
app.run(function($rootScope) {
  $rootScope.shopItems = [{
      ItemID: 1,
      Image: 'images/gmouse.jpg',
      Name: 'Gaming Mouse',
      Price: '200KR'
    },
    {
      ItemID: 2,
      Image: 'images/gkeyboard.jpg',
      Name: 'Gaming Keyboard',
      Price: '400KR'
    },
    {
      ItemID: 3,
      Image: 'images/gbackpack.jpg',
      Name: 'Gaming Backpack',
      Price: '300KR'
    },
    {
      ItemID: 4,
      Image: 'images/coke.jpg',
      Name: 'Coke',
      Price: '10KR'
    },
    {
      ItemID: 5,
      Image: 'images/chaitea.jpg',
      Name: 'Indian Tea',
      Price: '20KR'
    }
  ];

  $rootScope.cartItems = [];
});

app.controller('mainCtrl', function($scope, $location) {
  $scope.indexNavMenu = "home";
  $scope.onChangeNav = function(value) {
    $scope.indexNavMenu = value;
    $location.path(value);
  };
});

<!-- Here is my shop HTML page, where you add items to your cart. -->

<ul style="list-style-type: none;">
  <div class="row">
    <li ng-repeat="item in shopItems" class="col-sm-4">
      <div>
        <img ng-src="{{item.Image}}" class="img-thumbnail img-responsive shopimg" />
      </div>
      <div class="caption">
        <h3>{{ item.Name }}</h3>
        <h4>{{ item.Price }}</h4><button ng-click="addToCart(item)" class="btn btn-success">Add To Cart</button> <br /><br />

      </div>
    </li>
  </div>
</ul>

<!-- Here is my cart HTML page, where you can see your selected items, their price, name, image and increase/decrease quantity. -->

<div class="content">
  <div class="row col-sm-12">
    <table>
      <tr>
        <th width="168" align="left">Item</th>
        <th width="188" align="left">Description</th>
        <th width="60" align="center">Quantity</th>
        <th width="80" align="right">Price</th>
        <th width="80" align="right">Total</th>
        <th width="64"> </th>
      </tr>
      <tr ng-repeat="item in cartItems">
        <td><img src="{{item.Image}}" /></td>
        <td>{{item.Name}}</td>
        <td align="center">
          <form>
            <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
            <input type="number" id="number" value="{{item.Quantity}}" />
            <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
          </form>
        </td>
        <td align="right">{{item.Price}}</td>
        <td align="right">{{item.Total}}</td>
        <td align="center"><br /><button ng-click="itemRemove()" class="btn btn-danger float-right">Remove</button> </td>
      </tr>
      <tr>
        <td colspan="3">Have you modified item quantities?<button class="btn btn-link" ng-click="update()">Update</button> the Cart.&nbsp;&nbsp;</td>
        <td align="right">
          <h4>All Total:</h4>
        </td>
        <td align="right">
          <h4>{{item.GrandTotal}}</h4>
        </td>
        <td> </td>
      </tr>
    </table>
    <div class="cleaner h20"></div>
    <div class="right"><button class="btn btn-success">checkout</button></div>
    <div class="cleaner h20"></div>
    <div class="blank_box">
    </div>
  </div>
</div>
<div class="cleaner"></div>

编辑：将 value="{{item.cItem.Quantity}}" 更改为 value="{{item.Quantity}}"。 Value is still empty.

Answer 1

value="{{item.Quantity}}" 应该这样声明