Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

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

    
    
    
    Document
    
    



    

Total

Rows

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲