CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
luca.violino
luca.violino

Reputation: 35

Angularjs retrieve values from ng-repeat

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?

Upvotes: 0

Views: 2643

Answers (2)

Alidad
Alidad

Reputation: 5538

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>

Upvotes: 1

fabmilo
fabmilo

Reputation: 48310

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>

Upvotes: 0

Related Questions