ng-repeat显示json对象Angular JS

时间:2015-06-19 22:35:07

标签: javascript json angularjs list

我有一个通过一个服务从json文件中获取的项目列表。 在列表的末尾,一个按钮可以让您将每个项目添加到包含您单击/添加的元素的列表中。 只有在不超过项目可用数量时才能添加相同的项目。

我已经制作了一个基本上每次添加项目时创建对象的代码,问题是对象构建对于迭代(I have made another question regarding this problem..)来说并不是很容易。 当我在视图上渲染时,它看起来像一种对象stringify

以下是代码的一部分:

观点:

<div ng-repeat="session in sessiones">
   Date:  {{session.date | dateformated }} &nbsp
  Availability: {{session.availability}} &nbsp
  <a ng-click="addItem($index, event, session);" ng-show="addMore"> [Add to cart] </a>

<div ng-repeat="(key, value) in cartItems">
    <h1> {{value.sessions}})</h1>
   </div> 

控制器中的功能:

$scope.addItem = function(index, event, session) {
  if (session.availability>0){
       $scope.cartItems = $scope.cartItems || {};
       $scope.cartItems[event.id] = $scope.cartItems[event.id] || {title:event.title, sessions:{}}
       $scope.cartItems[event.id].sessions[session.date] =          $scope.cartItems[event.id].sessions[session.date] || {num:0}
       $scope.cartItems[event.id].sessions[session.date].num++;
        session.availability-=1;
        console.log($scope.cartItems);
    }
}

Here's my try on fiddle

重要更新---&gt;这是一个很好地说明我想要做的事情的例子:只是相同但是当一个元素已经在列表中时我不必重复元素我必须计算它被添加的次数

Simple cart list

1 个答案:

答案 0 :(得分:1)

我修好了。 Fiddle

  • 我没有看到ADD +链接,所以我一直玩它直到它出现。
  • 我怀疑索引有问题,但没关系。
  • 我注意到$ scope在javascript中是一个不同的颜色,然后注意到你将addItem分配给不是你的控制器的东西。

所以最后我把它移到了底部,附上了addItem:

});