クリック数を増やして入力する

Question

まず、Angular JSの新機能です。

私はアイテムのリストを持っており、それぞれのアイテムをクリックすることでテーブルに追加する必要があります。項目はjsonファイルに格納されます。

クリックイベントが数回繰り返されると、テーブルにあるカウンタ入力が増加する必要があります。

<ul class="list-inline" > 
<li ng-repeat="food in foods" class="food_list"> 

<img class="img-box" src="images/{{ food.food_photo }}" ng-click = 'addRow(food)'><br/><span>{{food.food_name}}</span> 

</li> 
</ul> 

<table class="table" id="table-right"> 
<tr> 
    <th>Item Name</th> 
    <th>Quantity</th> 
    <th>Price</th> 
    <th class="hidden-print">Delete</th> 
</tr> 

<tr ng-repeat="row in rows"> 
<td>{{row.food_name}}</td> 
<td><input type="number" class="form-control" ng-model="row.food_count"></td> 
<td>{{row.food_cost}}</td> 
<td class="hidden-print"><button class="btn btn-info hidden-print" data-ng-click="removeRow($index)">Remove</button></td> 
</tr> 

app = angular.module('app',[]); 
app.controller('MyCtrl', ['$scope','$http', function($scope, $http){ 

$scope.rows = []; 

$scope.addRow = function(obj) { 

    $scope.foodname = obj.id; 
    $scope.foodprice = obj.price; 

    $scope.rows.push(obj); 

    $scope.counter++; 
} 

}]); 

あなたは私を助けていただけますか？ありがとうございました。

Answer 1

最初に、rowオブジェクトのプロパティが繰り返しのクリックで更新する必要がある変数であることを理解する必要があります。他の$scope変数を更新しても、ビューが$scope.rowsオブジェクトにバインドされているため、行固有のデータは変更されません。

addRowの機能は次のようになります。

$scope.addRow = function(obj) { 
     if($scope.rows.indexOf(obj) >= 0){ // if this obj already exist 
     $scope.rows[$scope.rows.indexOf(obj)].food_count++;  
     } 
     else 
     $scope.rows.push(obj); 
    } 

その後$scope.foodsのオブジェクトが表示するfood_countと呼ばれる性質を持っている必要があります。

$scope.foods = [ 
     {food_name:'Jani',food_cost:'10', food_count:0}, 
     {food_name:'Hege',food_cost:'8',food_count:0}, 
     {food_name:'Kai',food_cost:'5',food_count:0}] 

solution