I have some fields (select and input text). The user can add new rows clicking the button 'add'. But how can i do if i want to clone the filled array, with the input?
I mean: i select the 3° , then i write '55' in the first input type and '9' in the second one. If the user press 'add', how can i duplicate the field with the number that i wrote?
<button data-ng-click="cloneItem()" class="btn inline">
Add
</button>
You need to have the add button inside the ng-repeat and then pass the entered food object to the cloneItem function. Then you can just clone that item in that function. Using angular copy function to make a copy of the food object.
Code:
Changed Controller scope function:
$scope.cloneItem = function (food) {
var itemToClone = angular.copy(food);
$scope.foods.push(itemToClone);
}
Changed HTML (ng-repeat loop):
<div ng-controller="ProductController">
<div data-ng-repeat="food in foods track by $index">
<div class="form-group title-field">
<select ng-model="food.selectproduct" >
<option value="1">0101003 - Min. Diet pesce 2 Scd</option>
<option value="2">0101004 - Min. Maint pesce 4 Scm</option>
<option value="3">0101115 - Min. Diet pesce 1.5 Scd</option>
</select>
<input type="hidden">
<button data-ng-click="removeItem($index)" class="btn delete-field-{{$index}}">
Delete
</button>
</div>
<div class="form-group">
<label> QUANTITY 1 </label>
<input type="text" class="form-control" data-ng-model="food.Quantity1" id="barcodeValue1" >
</div>
<div class="form-group">
<label> QUANTITY 2 </label>
<input type="text" class="form-control" data-ng-model="food.Quantity2" id="barcodeValue2">
</div>
<div class="ean">
<h2> CODE: </h2>
<barcode food="food"></barcode>
</div>
{{food | json}}
<button data-ng-click="cloneItem(food)" class="btn inline">
Add
</button>
</div>
Assuming you want to copy the values of the previous block when add button is clicked, you can do this:
$scope.cloneItem = function() {
var food = $scope.foods[$scope.foods.length - 1];
var itemToClone = {
"selectproduct": food.selectproduct,
"Quantity1": food.Quantity1,
"Quantity2": food.Quantity2
};
$scope.foods.push(itemToClone);
}
