Angularjs retrieve values from ng-repeat
Question
I'm new to angularjs and just trying to make a simple calculator where the user select a type of element and set the weight to calculate some information. I'm doing this for different elements, using ng-repeat but I can't figure out how to retrieve the information from the different iteration of ng-repeat.
Here's a demo: http://plnkr.co/edit/gjNuHD4LzMINGFTXp8wD?p=preview
For example a user input a number in the first input box and select a type from the ingredienti object, then he can fill the second line and I'd like to output for example the sum of the 2 inputs, or each input divided by a value taken from the ingredienti object.
Is this possible and is this a proper way to do it?
2 answers
solution1
1 ACCPTED 2013-10-18 18:19:21
I am not expert in angular and might be other options to solve this. However, this is how I resolved your issue:
I was able to create a model (an object) for each row/line so to have access to the values later for any calculations. Then render that model on the page. On each change event I will calculate the sum. Just an idea that you can expand on it.
// Initialize to 3 and create 3 models for it. A model
// has ID the name of the field and so on, you add other fields to it.
$scope.cntInputs = 3;
$scope.inputs = [];
for(var i=1; i <= $scope.cntInputs; i++){
$scope.inputs.push({id:i,pesco:'',zuccheri:''});
}
// call this when you want to increase the `Numero ingredienti`
$scope.addModel = function (){
$scope.inputs.push({id:$scope.cntInputs-1,pesco:'',zuccheri:''});
}
// call this whenever you have a change on each model.
$scope.calculate = function() {
var sum =0;
for(i=0; i <$scope.inputs.length; i++) {
sum += Number($scope.inputs[i].pesco)
$scope.inputs[i].zuccheri = 100; // XX * peso/100 calculate however you want
}
$scope.sum = sum;
};
/ html body
<body>
<div ng-controller="bxController" id="content">
<h1>Bilanciamento</h1>
Numero ingredienti: <input type="number" ng-change="addModel()" ng-model="cntInputs" placeholder="#Inputs"><br/>
<table>
<tr>
<th>Ingrediente</th>
<th>Peso</th>
<th>Zuccheri</th>
<th>Grassi</th>
<th>SML</th>
<th>Altri Solidi</th>
<th>Totale Solidi</th>
<th>Acqua</th>
</tr>
//just to display how its working {{inputs}}
<tr ng-repeat="c in inputs" type="text" name="myForm">
<td>
<select
ng-change="selectAction()"
ng-model="value"
ng-options="value.ingrediente for value in ingredienti">
<option>--</option>
</select>
</td>
<td>
<input ng-model="c.pesco" ng-change="calculate()" ></input>
</td>
<td> {{c.zuccheri | number}} g</td>
<td>{{value.grassi * peso / 100 | number}} g</td>
<td>{{value.sml * peso / 100 | number}} g</td>
<td>{{value.altrisolidi * peso / 100 | number}} g</td>
<td>{{value.totalesolidi * peso / 100 | number}} g</td>
<td>{{value.H2O * peso / 100 | number}} g</td>
</tr>
</table>
risultato:({{sum}})
</div>
</body>
solution2
0 2013-10-18 18:55:32
There were many and different errors in the example. Checkout this working plunkr:
http://plnkr.co/edit/roIbBuXMleu7o9bRtway?p=preview
$scope.cntInputs = 1;
$scope.inputs = [];
$scope.$watch('cntInputs', function(){
for(var i= $scope.inputs.length; i < $scope.cntInputs; i++ ){
$scope.inputs.push( {} );
}
$scope.inputs.splice($scope.cntInputs, $scope.inputs.length - $scope.cntInputs);
});
Html:
<tr ng-repeat="row in inputs" type="text" name="myForm">
<td>
<select
ng-change="selectAction()"
ng-model="row.value"
ng-options="value as value.ingrediente for value in ingredienti">
<option>--</option>
</select>
</td>
<td>
<input ng-model="peso" ng-change="test()" name="foo_{{$index}}"></input>
</td>
<td>{{row.value.zuccheri * peso / 100 | number}} g</td>
<td>{{row.value.grassi * peso / 100 | number}} g</td>
<td>{{row.value.sml * peso / 100 | number}} g</td>
<td>{{row.value.altrisolidi * peso / 100 | number}} g</td>
<td>{{row.value.totalesolidi * peso / 100 | number}} g</td>
<td>{{row.value.H2O * peso / 100 | number}} g</td>
</tr>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.