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!  shades_smile

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

    
    
    
    Angular JS (1x) – Modify repeating rows table | SPJeff
    
    

    

Total

Rows
Return to Top ▲Return to Top ▲