CODEWITHSUNDEEP
javascriptarraysangularjslocal-storageangular-local-storage
Eric Mitjans
Eric Mitjans

Reputation: 2169

Reseting variables and editing arrays with AngularJS

I'm building an app using AngularJS and LocalStorage. I've run into a problem that it's a tad too complex for me.

I have a list of people, and the idea is to be able to add arrays of names. I choose X names, click add, creates an object in an array, it resets the list, and I can start over, choose X names, click add, etc.

Here's how I create the temporary array that then I push into 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 passangers</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);
}

My problem is that I can create objects into the array, but when I add an object, the selected items of the list of names won't reset, so they will be pre-selected when adding the next object. At the same time, it will also stay linked to the last object added, so when I modify the selection, the last object will also get modified.

This also messes with the possibility of adding an editing capability for each object of the array.

I've created a Plnkr that illustrates the issue.

If you could shed some light on the issue, that would be brilliant.

Upvotes: 1

Views: 244

Answers (1)

Oleksandr T.
Oleksandr T.

Reputation: 77482

In addRecord you need reset property chosen 

$scope.addRecord = function () {
    $scope.recordlist.push({ pax: angular.copy($scope.paxlist) });

    jsonToRecordLocalStorage($scope.recordlist);

    $scope.editItem = false;
    $scope.paxlist  = [];

    $scope.stafflist.forEach(function (el) {
      el.chosen = false;
    });
};

Demo: http://plnkr.co/edit/vV8OuKiTKYkFyy7SrjOS?p=preview

Upvotes: 1

Related Questions