AngularJS dynamic Tables and ng-repeat

Question

I am trying to answer my own unanswered question but stuck with some weird results of my code that I can't figure out.

When I generate the whole table by entering common heights and floor numbers and then add Elevators one by one The program works fine and perfect.

But When I add some rows manually by clicking arrow signs and then add elevator, instead of adding one elevator it adds many elevators, where number of elevators = number of floors manually added.

I tried to look at code line by line, but I can't figure out, where is bug here. Please support!

My concern is problems in one of following functions mostly $scope.AddElevator

$scope.AddElevator = function(ElevatorName) {

    console.log("Floor Numbers");
    console.log($scope.Floors.length);
   /* $scope.Floors.sort(function(a, b) {
      if (a.FloorNo > b.FloorNo) {
        return -1;
      }
      if (a.FloorNo < b.FloorNo) {
        return 1;
      }
      // a must be equal to b
      return 0;
    });
    */
    // CODE to ADD New Elevator in Table 
    for (var i = 0; i < $scope.Floors.length; i++) {
      console.log(i);
      $scope.Floors[i].LiftServeDetails.push({
        Name: ElevatorName,
        ASide: "Available",
        BSide: "N/A"

      });
      console.log($scope.Floors[i]);
    }
  };
 // Add Row on top of a Row
  $scope.floorUp = function(floorno) {
    $scope.tmpLiftServeDetails = [];
    $scope.tmpLiftServeDetails = $scope.Floors[0].LiftServeDetails;

    for (var i = 0; i < $scope.Floors.length; i++) {
      if ($scope.Floors[i].FloorNo > floorno) {
        $scope.Floors[i].FloorNo = $scope.Floors[i].FloorNo + 1;
      }
    }

    $scope.Floors.push({
      FloorNo: floorno + 1,
      Level: null,
      Height: 0,
      Shops: 0,
      LiftServeDetails: $scope.tmpLiftServeDetails

    });

  };

  // Add Row in bottom of a Row
  $scope.floorBottom = function(floorno) {
    $scope.tmpLiftServeDetails = [];
    $scope.tmpLiftServeDetails = $scope.Floors[0].LiftServeDetails;

    for (var i = 0; i < $scope.Floors.length; i++) {
      if ($scope.Floors[i].FloorNo >= floorno) {
        $scope.Floors[i].FloorNo = $scope.Floors[i].FloorNo + 1;
      }
    }
    $scope.Floors.push({
      FloorNo: floorno,
      Level: null,
      Height: 0,
      Shops: 0,
      LiftServeDetails: $scope.tmpLiftServeDetails
    });

  };

Answer 1

In your floorUp and floorBottom function you are not copying the objects, you are referencing them.

Try this:

$scope.floorUp = function(floorno) {
var tmpLiftServeDetails = angular.copy($scope.Floors[0].LiftServeDetails);

for (var i = 0; i < $scope.Floors.length; i++) {
  if ($scope.Floors[i].FloorNo > floorno) {
    $scope.Floors[i].FloorNo = $scope.Floors[i].FloorNo + 1;
  }
}

$scope.Floors.push({
  FloorNo: floorno + 1,
  Level: null,
  Height: 0,
  Shops: 0,
  LiftServeDetails: tmpLiftServeDetails

});

};