how to bind data from dynamically named inputs inside a ng-repeat

Question

my goal is to be able to copy data from a table row to another table row.

if the data from 2015 has not changed from 2016 the user needs a quick way of copying the values into the 2016 input fields. the models are dynamically created for these forms. the data you see in this image is assigned to a section. the input models are name 'price_min + section_id', price_max + section_id' , etc... the history model does not have the section_id added to the end of the model names. so there needs to be a mapping function that i need help with. I need to map the history values to the current model convention and update the view with the values.

currently i have a click function that brings in the matched section history. here is a screen shot of what that looks like.

in that same function i have the 2016 object array with the current model naming convention.

i need to copy the history values into the inputArray. how i go about doing this, i dont know? I have complete control on how this works. and in the plunker you will see how i did this. if i need to change something else to make this work then that is ok. javascript, jquery, lodash, linq.js is currently being used in project.

working plunker working plunker

$scope.copyHistoryData = function (section) {
    var selected = Enumerable.From(sectionsHistory).Where("x => x.section_id == '" + section.section_id + "'").ToArray();
    selected = selected[0];
    var inputArry = section.sectionInputs;
};

here's a tutorial, https://www.atlassian.com/git/tutorials/setting-up-a-repository/ but i think it'll be too much effort. anyways, to clarify, you want values from the first row to be copied into the second row? — jkris, Jan 12 '16 at 03:33

SSH · Accepted Answer · 2016-01-12T03:57:42.960

1

I'm not sure why you use such complex data structure, but here is my take on it

$scope.copyHistoryData = function (section, input) {
        var historyId=input.model.split('-')[0];
        var historyVal=section.sectionHistory[section.sectionHistory.length-1][historyId];
        $scope.model[input.model]=historyVal;
    };

To fill all fields:

$scope.copyHistoryData = function (section) {
      angular.forEach(section.sectionHistory[section.sectionHistory.length-1], function (historyVal, historyId) {
        var inputModel=historyId+"-"+section.section_id;
        $scope.model[inputModel]=historyVal;
      });
    };

http://plnkr.co/edit/OOEmgzKB1pqKjSJMayVF?p=preview

edited Jan 12 '16 at 03:57

answered Jan 12 '16 at 03:43

SSH

2,533
16
21

im up for suggestions. – texas697 Jan 12 '16 at 03:45
well does that function do what you want? – SSH Jan 12 '16 at 03:46
any chance i can copy the entire row at once. i just put the ng-click with every td because it was fast – texas697 Jan 12 '16 at 03:46

score 1 · Answer 2 · answered Jan 12 '16 at 04:33

I agree with @ssh. The data structure is a mess. I think this is a better representation of what it should look like. Probably not the best but you shouldn't have to iterate through the data to then display it like that.

http://plnkr.co/C9DWV1dSvkk8lcYdm0An?p=preview

<div class="hpanel" ng-repeat="section in sections">
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-12">
          <ul class="list-inline">
            <li>
              <h5>
                <b>SecID</b>
              </h5>
              <span>{{section.section_id}}</span>
            </li>
            <li>
              <h5>
                <b>Section Name</b>
              </h5>
              <span>{{section.section_name}}</span>
            </li>
          </ul>
          <hr/>
          <button ng-click="section.new_section_history = section.section_history">copy row</button>
          <table>
            <tr>
              <td ng-repeat="label in labelIndex">
                {{label.label}}
              </td>
            </tr>
            <tr>
              <td ng-repeat="label in labelIndex">
                {{section.section_history[label.index]}}
              </td>
            </tr>
            <tr>
              <td ng-repeat="label in labelIndex">
                <input ng-model="section.new_section_history[label.index]"/>
              </td>
            </tr>
            <tr>
              <td ng-repeat="label in labelIndex">
                <button ng-click="section.new_section_history[label.index] = section.section_history[label.index]">copy</button>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>

Thanks for the suggestion. I'm always looking for simpler and better way to do things — texas697, Jan 12 '16 at 04:37

Diego · Answer 3 · 2016-07-06T03:12:12.083

I have checked your code, and I agree with @Steven Kaspar, the anchors in every row doesn't make much sense. I have solved it using jQuery (I know it doesn't follow your scheme with Angular, but it's another solution). I have added a new <tr> to add a button inside it.

Check this out:

<tr>
    <td colspan="10"><button class="copyRow">Copy complete row</button></td>
</tr>

And in the app.js:

$(document).on("click", ".copyRow", function(){
    var $btn = $(this),
    $tbody = $btn.parent().parent().parent(),
    $trs = $tbody.find("tr");

    $.each($trs.eq(0).find("td"), function(index, td){
     $trs.eq(1).find("td").eq(index).find("input").val(parseFloat($(td).text().replace("$", "")));
    });
})

Here is the updated plunker. I hope it helps

how to bind data from dynamically named inputs inside a ng-repeat

3 Answers3

Linked