點擊次數並添加到輸入

我有一個項目列表，並通過點擊每一個，它應該被添加到表中。這些項目存儲在一個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++; 
} 

}]);

你能幫幫我嗎？謝謝。

來源

2017-02-21 Hekmat Sarwarzade

你能後的完整代碼（或將代碼放在一個[的jsfiddle（https://jsfiddle.net/）和後鏈接）？ – pahan

@pahan這是小提琴鏈接，但我無法添加JSON文件。 https://jsfiddle.net/sk4kh3g3/ –

很難看到你沒有JSON文件做了什麼。你可以添加他們嗎？另外，將腳本代碼與DOM分離始終更好 – pahan

首先，您必須瞭解row對象的food_count屬性是應該在重複點擊時更新的變量。更新任何其他$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

來源

2017-02-21 11:57:51 pahan

非常感謝。 –

點擊次數並添加到輸入

回答

相關問題