ng-repeat显示json对象Angular JS

时间:2022-08-23 23:28:24

I have a list of items that I take from a json file via one service. At the end of the list a button can let you add every item to a list containing the elements that you have clicked/add. You can add same item only when you don't exceed the number of availability of items.

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

I have made a code that basically creates an object everytime you add an item, the problem is that the object build is not very easy for iterate (I have made another question regarding this problem..). When I rendered on the view it appears like a kind of object stringify

我已经创建了一个代码,基本上每次添加一个项目时都会创建一个对象,问题是对象构建对于迭代来说不是很容易(我已经提出了另一个关于这个问题的问题......)。当我在视图上渲染时,它看起来像一种对象stringify

Here is part of the code:

以下是代码的一部分:

the view:

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

the function in the controller:

控制器中的功能:

$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

这是我对小提琴的尝试

Important update---> Here is an example that ilustrates very well what I want to do: just the same but instead of repeating elements when an element is already on the list I have to count the number of times that it has been added

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

Simple cart list

简单的购物清单

1 个解决方案

#1


1  

I fixed it. Fiddle

我修好了它。小提琴

  • I didn't see the ADD+ link, so I played with that until it appeared.
  • 我没有看到ADD +链接,所以我一直玩它直到它出现。

  • I suspected trouble with index, but it was fine.
  • 我怀疑索引有问题,但没关系。

  • I noticed the $scope was a different color in the javascript, then noticed that you were assigning addItem to something that wasn't your controller.
  • 我注意到$ scope在javascript中是一个不同的颜色,然后注意到你将addItem分配给不是你的控制器的东西。

So in the end I just moved this down to the bottom, enclosing addItem:

所以最后我把它移到了底部,包含了addItem:

});

#1


1  

I fixed it. Fiddle

我修好了它。小提琴

  • I didn't see the ADD+ link, so I played with that until it appeared.
  • 我没有看到ADD +链接,所以我一直玩它直到它出现。

  • I suspected trouble with index, but it was fine.
  • 我怀疑索引有问题,但没关系。

  • I noticed the $scope was a different color in the javascript, then noticed that you were assigning addItem to something that wasn't your controller.
  • 我注意到$ scope在javascript中是一个不同的颜色,然后注意到你将addItem分配给不是你的控制器的东西。

So in the end I just moved this down to the bottom, enclosing addItem:

所以最后我把它移到了底部,包含了addItem:

});