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?

Alidad · Accepted Answer · 2013-10-18 21:08:27Z

1

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>

edited Oct 18, 2013 at 21:08

answered Oct 18, 2013 at 18:19

Alidad

5,5381 gold badge27 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andyrooger Over a year ago

Was too slow, but I was going to suggest pretty much the same thing. One model per row. I may as well post the plunker. It's similar but using watchers to work things out.

luca.violino Over a year ago

Thanks for the help, I'm now figuring out a bit on the method, but now what if I want to do something like:

$scope.getSumZuccheri = function(){     var sum = 0;     for(var i=0; i<$scope.inputs.length; i++) {       sum += ($scope.inputs[i].tipo.zuccheri * $scope.inputs[i].peso / 100) ? parseInt($scope.inputs[i].tipo.zuccheri) : 0;     }     return sum;   };

To call the sum of the columns that are not an input but calculated? Here's the plunker.

Alidad Over a year ago

I would put them in the same model as well {id:$scope.cntInputs-1,pesco:'', other1:'',other2:''}, and calculate all of the in that model. You can move your calculation all into your calculate method. It is actually recommended as its better not to do calculation on the views.

Alidad Over a year ago

I updated my answer with an example, follow that, let me know if it doesn't make sense.

fabmilo · Accepted Answer · 2013-10-18 18:55:32Z

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>

Collectives™ on Stack Overflow

Angularjs retrieve values from ng-repeat

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related