Binding input range to specific cell in angular table

Question

In Angular I have this simple model:

$scope.rdata = [
    {1: 7, 2: 23,3: 9, 4: 13,5: 32},
    {1: 23, 2: 8,3: 67, 4: 11,5: 6},
    {1: 35, 2: 12,3: 24, 4: 17,5: 24},
    ];

I render it in html using ng-repeat:

<table>
    <thead>
        <p>Example of xy data rendered</p>
    </thead>
    <tbody>
        <tr ng-repeat="row in rdata">
          <td ng-repeat="c in col">
            <div>{{row[c]}}</div>
          </td>
          <td>
            <input type="range" id="example" min="0" max="1" step="0.01">
          </td>
          <td><div>
            Value compiled: {result of input range value * value in row[c]}
             </div></td>
         </tr>
    </tbody>
</table>

Basically I would like to bind the Value displayed in the last div of my last (where Value compiled is written) as the product of the input range value in the same row and the value in the last column of the same row. If possible, I would like to understand if there is a way to reference whatever value located in column x and row y and be able to interact with it, put it in a formula etc... without building another angular model.

Let me know if it is sufficiently clear what I'm trying to achieve.

Edit: my data is a bit more like this:

$scope.financials2 = [ { '2011': 98, '2012': 97, '2013': 100, name: 'Sales' },
  { '2011': -5, '2012': -6, '2013': -7, name: 'Costs of Goods Sold' },
  { '2011': 93, '2012': 91, '2013': 93, name: 'Gross Profit' },
  { '2011': -37, '2012': -36, '2013': -35, name: 'Operating Expenses' },
  { '2011': 54, '2012': 55, '2013': 58, name: 'Operating income' } ]

I may need to restructure the format of the data. The idea is by row I show concepts like Sales, Gross Profit etc... and Values are displayed in columns grouped by years

So the intermediate stage would be like:

Concept            2011 2012 2013
Sales                98   97  100
Cost of Goods Sold   -5   -6   -7
Gross Profit         93   91   93 

The idea is I would like to add two columns,

• one with a slider (input range) for every row, which show growth rates, so basically an input range going from -0.05 to +0.05
• another column showing 2014 forecasts: so Sales 2014 = Sales 2013 * (1+ slider value), Gross Profit 2014 = Gross Profit 2013 * (1+ Slider value)

So we have 2 additional columns, with the first one containing sliders for every row and the second columns showing the result of the 2013 columns times the slider values. Hope it's clearer now.

Answer 1

There are two pieces it seems you are trying to get here. The first is how do you get the value in the input field, and the second how do you get row[c].

For the input field, you can append the value of the input into your row using ng-model.

For your object it is best to define names for each value, rather than just {1:1, 2:3, 3: 4}, otherwise, just use an array. In the example provided, I called your last item in the object last in this jsfiddle example.

http://jsfiddle.net/reszjcu2/ - warning, the formatting is pretty crap.

Note, I had to provide key and value for the row object, as ng-repeat only works with arrays, not objects. Another reason to use an array if you aren't going to actually have named items in your object.