Angular js binding list of data dynamically based on checkboxes

Question

I have an angular app in this plunkr

Here the button opens a modal which has a table. When an item in the table is checked or unchecked, it changes the values in the progress bar accordingly.

Below the table, it has a list of all the checked courses shown. How do i bind this data accordingly such that when a checkbox is checked, it also shows the item in this list dynamically? Here is the code i used for displaying this list of items:

        <div ng-repeat="child in selectedCourses">
          {{child.course.subject}}-{{child.course.course_no}}
        </div>

gkalpak · Accepted Answer · 2014-06-09 20:54:27Z

1

The problem is that you push the same items many times into $scope.selectedCourses, which results into an error (because of duplicate values in ngRepeated items) which in turn causes the view to not be updated.

To prevent adding the same item many time, you should check if it is already present in the array:

$scop.checkplanneddetails = function (course) {
    ...
    for (var k = 0; k < $scope.planneddetails.length; k++) {
        if ($scope.requirementcoursename==$scope.planneddetails[k].course_name) {
            if (!$scope.checkcoursefunction($scope.selectedCourses, course)) {
                // ONLY add the course if it is NOT already present
                $scope.selectedCourses.push(course);
            }
            course.checked = true;
            return true;
        }
    }
    return false;
};

There is also a problem with using ng-checked="checkplanneddetails(child), because checkplanneddetails is not idempotent. You should not use it with ngChecked, because it is run every time a $digest cycle takes place.
You should ngInit instead and also make sure you add course.checked = true at the proper place inside checkplanneddetails (see above):

<!-- Change that: -->
<input type="checkbox" ng-checked="checkplanneddetails(child)" ... />

<!-- To this: -->
<input type="checkbox" ng-init="checkplanneddetails(child)" ... />

See, also, this short demo.

edited Jun 9, 2014 at 20:54

answered Jun 9, 2014 at 20:34

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abhishek Over a year ago

its working great for the values that are checked newly. But when i uncheck on ENVR-1402, it is not splicing it. Is there another error in the code i wrote?

gkalpak Over a year ago

I forgot to mention you should check out my updated answr, but obviously you did already :)

Abhishek Over a year ago

hi i am having some trouble in one of the questions. Can you help here? stackoverflow.com/questions/26965379/…

Collectives™ on Stack Overflow

Angular js binding list of data dynamically based on checkboxes

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related