How to get input value from dynamically created input box within a table using ng-repeat?

Question

How to get input value from dynamically created input box within a table using ng-repeat? I have this code in my html:

   <table class="table table-striped" name="progressLogTable">
          <thead>
              <th>Title</th>
              <th>Input</th>
          </thead>
          <tbody>
             <tr ng-repeat="x in progressLog track by $index ">
                <td>{{x}}</td>
                <td><input type="number" ng-model="dataInput[$index]"></input></td>
             </tr>
          </tbody>
   </table>

I need the value of what ever is inside of the text boxes generate when a button is clicked. Here is my JS so far:

 $scope.gettingInputDataFromTrackables = function(){
      $scope.dataInput =[];
  }

I have tried dynamically creating the model of each input by using $index but I believe I am using it incorrectly. I have also tried having my td generated as:

<td>{{x}}</td>
<td><input type="number" ng-model="progressLog[$index]"></input></td>

but when I do that it binds my Title header to the value of the input box at that index. To summarize I just need the value of the input box that corresponds to the Title which is also dynamically added in the ng-repeat.

What is inside $scope.dataInput when you press the submit button? How is it not working? — EmandM
– EmandM, Commented Jun 15, 2018 at 2:04
When I do console.log($scope.dataInput); inside the submit function it logs an empty array as apposed to the values of the dynamically created input boxes. — Marcus Cantu
– Marcus Cantu, Commented Jun 15, 2018 at 2:11
I'm sorry, this is not at all what you are asking for, but I'll let you in on the easy way in angular: Stick the model to the objects your are iterating through. For example: ng-model="x.dataInput". Also track by $index gets so quirky once you want to add/remove any items. It will save you tons of trouble to just make sure your items in progressLog-items has a proper id field with unique values and do ng-repeat="x in progressLog track by x.id". Again, not what you was asking- sorry! — ippi
– ippi, Commented Jun 15, 2018 at 2:12
I don't know why I didnt think to do that for this 'ng-repeat` I did it for every single other one in my project. Thank you for reminding me! — Marcus Cantu
– Marcus Cantu, Commented Jun 15, 2018 at 2:20

Marcus Cantu · Accepted Answer · 2018-06-15 04:49:38Z

1

Well it was a simple fix. Inside my function:

$scope.gettingInputDataFromTrackables = function(){
      $scope.dataInput =[];
      console.log($scope.dataInput);
  }

I was initializing $scope.dataInput = [] every time it was clicked resulting in the data being cleared and me logging an empty array. This did not hit me for the longest time. The fix is :

     $scope.dataInput =[];
     $scope.gettingInputDataFromTrackables = function(){          
              console.log($scope.dataInput);
          }

Yes that's all. I just declared $scope.dataInput outside the scope of the function. Simple mistake and an easier fix.

edited Jun 15, 2018 at 4:49

answered Jun 15, 2018 at 4:43

Marcus Cantu

4933 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

How to get input value from dynamically created input box within a table using ng-repeat?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related