Table rows binding in angularJS

Question

If I simplify my situation, I have a list of numbers which I want the user to be able to add to. They are being displayed as a list of HTML input boxes and I want there to be an extra, empty row at the bottom which will be added to the list as soon as it's used. Any ideas?

I've tried this, but obviously there's nothing linking the second include into the numbers array.

$scope.numbers = [1,1,2,3];

Which is displayed with:

<ul>
  <ng-include src="'row.html'" ng-repeat="number in numbers"></ng-include>
  <ng-include src="'row.html'"></ng-include>
</ul>

<script type="text/ng-template" "id="row.html">
  <li><input type="number" ng-model="number" /></li>
</script>

EDIT:

I don't know why I'm having a hard time explaining this :P I'm imagining 5 inputs for the data above, 4 containing the numbers above and a fifth which is empty (and potentially differently styled, eg. slightly transparent) As soon as a number is typed into the empty fifth input - say, the number 5 - then the list has an extra element so it reads [1,1,2,3,5] and there are now 6 inputs on the page, the last of which is empty and slightly transparent.

The aim is to allow people to be able to add a new row of data without there being an "add new row" button. Does that make sense?

you question is totally not clear kindly explain a little more and please provide which version of angularjs you are using — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Sep 22, 2013 at 14:51

Nicolas ABRIC · Accepted Answer · 2013-09-22 18:04:52Z

1

Not quite sure to understand the "as soon as it's used" but what can be easily achieved is to add an entry in the list as soon as the user hits enter on the last input. See below :

<ul>
  <ng-include src="'row.html'" ng-repeat="number in numbers"></ng-include>
</ul>
<form ng-submit="add()">
  <input type="number" ng-model="newNumber" />
</form>

And in your controller :

$scope.numbers = [1,1,2,3];
$scope.newNumber = '';

$scope.add = function () {
    var parsed = parseInt($scope.newNumber);
    if(!isNaN(parsed)){
        $scope.numbers.push(parsed);
    }
    $scope.newNumber = '';
}

Every time the user will hit enter on the last input it will be added to the list of numbers and a new empty input will be shown at the bottom of the list.

A working Fiddle can be found here

answered Sep 22, 2013 at 18:04

Nicolas ABRIC

4,93531 silver badges18 bronze badges

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

1 Comment

JP. Over a year ago

This is almost exactly, what I'm looking for, except I'd want it to add() the new number as soon as anything is entered, maybe I could $watch $scope.newNumber instead. I'm also going to have to play with the transferal from newNumber to numbers, as my actual need is for a whole row of data (not just one number), but this is pretty damned close!

Collectives™ on Stack Overflow

Table rows binding in angularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related