AngularJSはループしたアイテムに値を割り当てます

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

$インデックスは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