Currently, I am working with an array that contains objects and I want to dynamically change the number of objects in this array based on user input from a number type input box. Whenever the number in the input box is increased, I need to increase the length of the array and add a default object. Conversely, if the number is decreased, I should remove the last object from the array. Below is the code snippet I have been using:
// HTML
<input type="number" class="form-control" min="0" max="12" ng-click ="topEntriesSelectOffense()" ng-value="page.offense.topRow.length">
// Controller
$scope.topEntriesSelectOffense = function () {
// Add new object when the number increases
$scope.page.offense.topRow.push({
"1": {
"firstName": "FirstName",
"lastName": "LastName",
"headshot": "file/path"
},
"2": {
"firstName": "FirstName",
"lastName": "LastName",
"headshot": "file/path"
},
"3": {
"firstName": "FirstName",
"lastName": "LastName",
"headshot": "file/path"
},
"position": "POS"
});
// Remove object when the number decreases
$scope.page.offense.topRow.pop();
}
The challenge I am facing is detecting when the user decreases the number in the input box. Additionally, I am unsure how to distinguish between value increase and reduction. Using ng-model for `page.offense.topRow.length` results in an array with missing indexes after the last one because it first increases the length before pushing the object, creating gaps like [1, 3]. Any suggestions or solutions would be greatly appreciated!