CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Abhishek
Abhishek

Reputation: 3068

angular js modal updating data issue

I have an angular js app in this plunker

When the Add Course button from the panel list next to the My academic course, it opens a new modal to get a list of courses to select from. Here when i check on a course from the list of courses in the modal, it automatically either increments or decrements the value of the planned credits and the progress bar within the same modal. Here instead of pressing save, if we press cancel, the modal does not post the course to the panel list which is correct. But it does not update the modal correctly. ie. after selecting some course in the modal, if we press cancel, and open the same add course modal again, the planned credits and progress bar still remain the same from the last closed modal. How do i correct this issue?

Here is what i used in the controller:

$scope.getPercentage = function() {
    return (($scope.subcategory.planned2 + $scope.subcategory.completed2) / ($scope.subcategory.required2) * 100).toFixed(2);
  }

  $scope.toggleCheck = function(course) {
    if (($scope.selectedCourses.indexOf(course) === -1) && ($scope.subcategory.planned2 + $scope.subcategory.completed2 < $scope.subcategory.required2)) {
      $scope.selectedCourses.push(course);
      $scope.subcategory.planned2 += 3;
      if (($scope.subcategory.planned2 + $scope.subcategory.completed2) == $scope.subcategory.required2) {
        alert('Requirement met');
      }
    } else {
      $scope.selectedCourses.splice($scope.selectedCourses.indexOf(course), 1);
      $scope.subcategory.planned2 -= 3;
    }

    $scope.getPercentage();
  };

  $scope.ok = function() {
    $scope.subcategory.subcategory2 = [];
    for (var i = 0; i < $scope.selectedCourses.length; i++) {
      $scope.subcategory.subcategory2.push({
        course: $scope.selectedCourses[i],
        term: "--",
        credit: "--",
        grade: "--"
      });
    }
    $modalInstance.close();
  };

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };

Upvotes: 0

Views: 66

Answers (1)

MaxWillmott
MaxWillmott

Reputation: 2220

I think I understand what you mean.

In your ModalInstanceCtrl

replace $scope.subcategory = detail;

with $scope.subcategory = angular.copy(detail);

Upvotes: 1

Related Questions