Angular JS (1x) – Modify repeating rows table
Live coding demo below showing how to leverage a text box change even to modify the number of vertical rows. Can easily step up/down by large numbers. Demo and code below.
Cheers!
Video
Angular JS (1x) – Modify repeating rows table from Jeff Jones on Vimeo.
Code
JS
function demoCtl ($scope) {
var vm = $scope;
vm.hello = 'world';
//default
vm.rowCount=2;
vm.rows = [{name:'first'},{name:'second'}];
//events
vm.numberRowsChanged= function() {
var gap = vm.rowCount - vm.rows.length;
if (gap == 0) return;
if (gap > 0) {
// more
for (var i = 0; i < gap; i++) {
vm.rows.push({});
}
} else {
// less
for (var i = gap; i < 0; i++) {
vm.rows.splice(-1, 1);
}
}
};
}
angular.module('demoApp',[]).controller('demoCtl', demoCtl);
HTML
Document
Total
Rows
