Question

所以我刚刚完成了AngularJS的课程，我还是一个新手。这是我从头开始编写应用程序的第一次尝试。我正在尝试构建一个应用程序，以跟踪最近在许多杂货店正在进行的垄断游戏中的游戏碎片。到目前为止，我已经能够循环每个字母，在该循环内有一个循环，显示分配给该字母的所有游戏部分。每个字母都有自己的表格，其中包含分配给该字母的所有游戏片段。从这里开始，我希望能够让用户+或 - 每个游戏块旁边的值来跟踪他们拥有多少件。这可能吗？我已经在循环中放了一个循环，我不太确定如何循环相应部分旁边的每个部分的计数。我知道这不是保持游戏数量的正确语法，但我已经进行了大量的谷歌搜索和研究，并且没有找到任何文章或教程来帮助我了解我所做的事情。我试图这样做。

这是我控制器的js代码：

'use strict';

angular.module('monopolyApp')
  .controller('MainCtrl', function ($scope) {
    $scope.pieces = [
      {
        letter:  'A',
        prize: '$100,000 Cash or Luxury Car',
        numbers: ['A500A','A501B','A502C','A503D','A504E'],
        count: [0,0,0,0,0]
      },
      {
        letter: 'B',
        prize: '$50,000 Home Makeover',
        numbers: ['B505A','B506B','B507C','B508D','B509E'],
        count: [0,0,0,0,0]
      }
    ];
  });

这是我视图中的html，但它是用玉写的。

.container
  .col-xs-4(ng-repeat='piece in pieces')  
    table
      tr
        th Piece: {{ piece.letter }} |  Prize: {{ piece.prize }}
      tr(ng-repeat='number in piece.numbers')
        td {{ number }}
        td {{ count }}

到目前为止，我只添加了A和B中的游戏片，只是因为它不可能做我想做的事情，我不想浪费任何不必要的时间。有关如何在每件作品旁边包含可调节值的任何想法，让用户可以跟踪每件作品的数量吗？

感谢。

Answer 1

真的很难理解你要完成什么。

关于如何在每件作品旁边包含可调节值的任何想法用户跟踪他们拥有的每件作品的数量

这是否意味着数字中的数字？

然后，您可以在模板中使用{{piece.numbers.length}}。

或者你的意思是输出每件的数量？

此值count: [0,0,0,0,0]中的项目？然后你可以在模板中这样做：

tr(ng-repeat='number in piece.numbers')
        td {{ number }}
        td {{ piece.count[$index] }}

$ index是current item in ngRepeat loop的内部可用值。因此，您可以使用它来访问piece.count数组的相应值。

Answer 2

如果我理解正确，您可以考虑另一种方式来建模您的数据。像这样：

$scope.pieces = [
    {
        letter:  'A',
        prize: '$100,000 Cash or Luxury Car',
        numbers: [{
            name: 'A500A',
            count: 0
        },{
            name: 'A501B',
            count: 0
        /* etc */
        }]
    }
];

然后HTML看起来像这样：

.container
  .col-xs-4(ng-repeat='piece in pieces')  
    table
      tr
        th Piece: {{ piece.letter }} |  Prize: {{ piece.prize }}
      tr(ng-repeat='number in piece.numbers')
        td {{ number.name }}
        td {{ number.count }}
        td 
          a(ng-click='number.count += 1') Add count
          a(ng-click='number.count -= 1') Subtract count

AngularJS将值分配给循环项

2 个答案: