Currently, I am developing an application utilizing AngularJS and LocalStorage. I've encountered a challenge that seems a bit too intricate for me to handle.
The app involves managing lists of people with the ability to add arrays of names. The process is as follows: I select X names, click "add," which creates an object in an array, resets the list, and allows me to repeat the process by choosing X names again and clicking "add."
Below is how I generate the temporary array that is then stored in LocalStorage:
HTML:
<form>
<div class="col-md-3" ng-repeat="staff in stafflist | orderBy: 'name'">
<button class="btn form-control" ng-show="!staff.chosen" ng-click="pushStaff(staff)">{{staff.name}}</button>
<button class="btn btn-primary form-control" ng-show="staff.chosen" ng-click="unpushStaff(staff)">{{staff.name}}</button>
</div>
<button class="btn ng-click="addRecord()">Add passengers</button>
</form>
JS:
$scope.paxlist = [];
$scope.pushStaff = function (staff) {
staff.chosen = true;
$scope.paxlist.push(staff);
console.log($scope.paxlist);
};
$scope.unpushStaff = function (staff) {
staff.chosen = false;
var index=$scope.paxlist.indexOf(staff)
$scope.paxlist.splice(index,1);
console.log($scope.paxlist);
}
The issue I'm facing is that while I can successfully create objects in the array, when adding an object, the selected items from the list of names do not reset, causing them to remain pre-selected when adding the next object. Furthermore, each new object added remains linked to the last one, leading to modifications affecting both. This complication also hinders the possibility of implementing an editing feature for each object in the array.
I have shared a Plnkr demonstrating the problem.
If you have any insights on this issue, it would be greatly appreciated.