javascript - Dynamic array creation (bound to a grid) based on a user entered number in the UI -

javascript - Dynamic array creation (bound to a grid) based on a user entered number in the UI -

i have employee info beingness entered in angular application.

got input type=number accepts number (let's number of employees). user enters number ex: 3, dynamically ui needs populate table of 3 rows in ui (we need ng-repeat on numberofemployees here obviously). each row should bound employee object names.

so, json object bound ui looks this,

{ numberofemployees : null, "employees" : [ { firstname: "set view", lastname: "set view", amount: "set view" }, { firstname: "set view", lastname: "set view", amount: "set view" } ] }

input type=number in view should bound numberofemployees. grid should bound employees array.

i think have setup watch on numberofemployees , push, splice in employees array. logic becomes wonky quickly, when think things like,

user enters 2 number, fills in info in employees grid, goes , changes number 3 or 1, you'll need adjust array every time number changes, figuring out array item remove , add together new 1 etc.

how solve elegantly in angular prescribed way?

how constrained in design? typically when i'm approaching form needs dynamically grow add together "add employee" button. adds row each time clicked. making alter in grid more granular cut down complexity.

current ui:

assuming you're stuck ui, indeed utilize $scope.$watch in controller.

you attach handler input ng-change="updateemployees()"

template:

<input type="number" ng-model="numofemployees"> <table ng-controller="employeesctrl"> <tr ng-repeat="employee in employees"> <td><input type="text" ng-model="employee.firstname"></td> <td><input type="text" ng-model="employee.lastname"></td> <td><input type="text" ng-model="employee.amount"></td> </tr> </table>

controller:

angular.module('curexample') .controller('employeesctrl', function () { $scope.employees = []; $scope.numofemployees = 0; $scope.addemployee = function() { $scope.employees.push({ firstname: "", lastname: "", amount: "" }); }; $scope.removeemployees = function(start, count) { if (start > -1) { $scope.employees.splice(start, count); } }; $scope.updateemployees = function () { var newnum = $scope.numofemployees, curnum = $scope.employees.length; if(!newnum || newnum === curnum) return; if(newnum > curnum) { for(var = 0; < (newnum - curnum); i++) { $scope.addemployee(); } } else { $scope.removeemployees(curnum - 1, curnum - newnum); } }; $scope.$watch('numofemployees', function (newvalue) { $scope.updateemployees(); }); });

alternative ui:

this solution looks akin following. i'll post jsfiddle when have moment

template:

<table ng-controller="employeesctrl"> <tr ng-repeat="employee in employees"> <td><input type="text" ng-model="employee.firstname"></td> <td><input type="text" ng-model="employee.lastname"></td> <td><input type="text" ng-model="employee.amount"></td> <td><button ng-click="removeemployee($index)">remove</button></td> </tr> </table> <button ng-click="addemployee()">add employee</button>

controller:

angular.module('altexample') .controller('employeesctrl', function () { $scope.employees = []; $scope.addemployee = function() { $scope.employees.push({ firstname: "", lastname: "", amount: "" }); }; $scope.removeemployee = function(index) { if (index > -1) { $scope.employees.splice(index, 1); } }; });

javascript angularjs