Привязка диапазона ввода к определенной ячейке в угловой таблице

В Angular у меня есть эта простая модель:

$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},
    ];

Я визуализирую его в html, используя 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>

В основном я хотел бы связать значение, отображаемое в последнем div моего последнего (где написано скомпилированное значение), как произведение значения входного диапазона в той же строке и значение в последнем столбце той же строки. Если возможно, я хотел бы понять, есть ли способ ссылаться на любое значение, расположенное в столбце x и строке y, и иметь возможность взаимодействовать с ним, помещать его в формулу и т. д. без создания другой модели angular.

Дайте мне знать, если достаточно ясно, чего я пытаюсь достичь.

Изменить: мои данные немного похожи на это:

$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' } ]

Мне может понадобиться изменить формат данных. Идея заключается в том, что по строкам я показываю такие понятия, как продажи, валовая прибыль и т. д., а значения отображаются в столбцах, сгруппированных по годам.

Таким образом, промежуточный этап будет выглядеть так:

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

Идея в том, что я хотел бы добавить два столбца,

  • один с ползунком (диапазон ввода) для каждой строки, который показывает скорость роста, поэтому в основном диапазон ввода составляет от -0,05 до +0,05.
  • другой столбец, показывающий прогнозы на 2014 год: так Продажи 2014 = Продажи 2013 * (1+ значение ползунка), Валовая прибыль 2014 = Валовая прибыль 2013 * (1+ значение ползунка)

Таким образом, у нас есть 2 дополнительных столбца, первый из которых содержит ползунки для каждой строки, а второй столбец показывает результат столбцов 2013 года, умноженный на значения ползунка. Надеюсь, теперь стало понятнее.


person Bondifrench    schedule 08.09.2014    source источник


Ответы (1)


Есть две части, кажется, вы пытаетесь добраться сюда. Во-первых, как вы получаете значение в поле ввода, а во-вторых, как вы получаете строку [c].

Для поля ввода вы можете добавить значение ввода в свою строку, используя ng-model.

Для вашего объекта лучше всего определить имена для каждого значения, а не просто {1:1, 2:3, 3: 4}, в противном случае просто используйте массив. В приведенном примере я назвал ваш последний элемент в объекте last в этом примере jsfiddle.

http://jsfiddle.net/reszjcu2/ - предупреждение, форматирование довольно дерьмовое.

Обратите внимание: мне пришлось указать ключ и значение для объекта строки, поскольку ng-repeat работает только с массивами, а не с объектами. Еще одна причина использовать массив, если вы не собираетесь использовать именованные элементы в своем объекте.

person pedalpete    schedule 29.09.2014
comment
Спасибо, вы уверены в своей ссылке jsfiddle? он выглядит довольно пустым, просто показывает «Привет, супергерой!», я отредактирую свой вопрос, чтобы он был более точным. - person Bondifrench; 30.09.2014
comment
извините, я разветвил чью-то еще скрипку и, видимо, не обновился. jsfiddle.net/ak6k1gh7/2 попробуйте этот. - person pedalpete; 30.09.2014
comment
Я думаю, что принцип существует, однако, когда я изменяю html на скомпилированное значение: {{ (1 + row.range||0.5) * row.last}}, мне кажется, что я получаю неправильные значения, знаете ли вы, почему? Ничего страшного, если нет, тогда я задам еще один вопрос на Stackoverflow. Спасибо за вашу помощь. - person Bondifrench; 01.10.2014
comment
Я не знаю, что вы имеете в виду под неправильными значениями. Моя версия говорит multipley row.range x row.last. If row.range does not exist, use 0.5. Нужно ли менять 0,5 на 1,5? - person pedalpete; 01.10.2014
comment
Я изменил jsfiddle: jsfiddle.net/ak6k1gh7/3, чтобы отразить желаемый результат. Я рассматриваю row.range как скорость роста, поэтому я изменил диапазон и расчет, это дает некоторые странные результаты, особенно когда вы нажимаете на первый ползунок, учитывая, что последнее значение равно 32, а значение диапазона равно 0,03, это дает для расчета (32 * (1+ 0,03)) значение, составленное из 320,96 вместо 32,96, и если я поставлю ползунок ниже 0 (поскольку мой диапазон начинается с -0,05), это даст мне ноль. - person Bondifrench; 01.10.2014
comment
@Bondifrench, это программирование, вам нужно уметь отлаживать такие вещи. Ваш расчет странный. Почему вы добавляете 1 к -0,05 вместо того, чтобы просто использовать диапазон от 0,95 до 1,05? Я еще раз обновил скрипт, поместив калькулятор диапазона в функцию в контроллере, чтобы с ним было легче играть и видеть, что происходит. jsfiddle.net/ak6k1gh7/5 - person pedalpete; 07.10.2014
comment
Спасибо @pedalpete, это классический расчет в финансовом моделировании macabacus.com/operating-model/income -statement-projections, ползунок - темпы роста, прогнозы продаж на 2014 г. = фактические продажи на 2013 г. * (1+ темпы роста). Я предполагаю, что главное - получить функцию в контроллере. - person Bondifrench; 07.10.2014
comment
@Bondifrench помещая функцию в контроллер, а не в html, чище и упрощает игру. Я часто принимаю эти решения, исходя из того, насколько сложной будет функция, будет ли она использоваться более чем в одном месте и т. д. и т. д. - person pedalpete; 09.10.2014