CODEWITHSUNDEEP
javascriptangularjs
Abhishek
Abhishek

Reputation: 3068

Angular table disabling toggles when condition is met

I have an angular app where i defined a table as follows:

<tr ng-repeat="child in requirements">
    {% verbatim %}
    <td class="vcenter"><input type="checkbox" ng-checked="selectedCourses.indexOf(child) != -1" ng-click="toggleCheck(child)" ng-disabled="required == (planned + completed)" value=""/>
        {{child.course.subject}}-{{child.course.course_no}}
    </td>
    <td class="vcenter">{{child.course.course_name}}</td>
    {% endverbatim %}
    <td class="vcenter">3</td> 
</tr>

In the app.js(controller), i defined the following function such that the toggling disables itself after the condition is met from the above.

$scope.toggleCheck = function (course) {
    if (($scope.selectedCourses.indexOf(course) === -1)) {
        $scope.selectedCourses.push(course);
        $scope.planned += 3;
        if (($scope.planned + $scope.completed) == $scope.required) {
            alert('Requirement met');
        }
        } else {
            $scope.selectedCourses.splice($scope.selectedCourses.indexOf(course), 1);
            $scope.planned -= 3;
        }
    $scope.getPercentage();
};

So far everything works great and the table disables the toggles once the condition is met. But the table disables even the checked toggles when it disables which makes sense. How do i make sure that the disable happens only to the unchecked toggles and not the checked ones?

Upvotes: 0

Views: 72

Answers (1)

Sam P
Sam P

Reputation: 1841

You need to check if the ng-checked is true as well.

<td class="vcenter">
    <input type="checkbox"
        ng-checked="selectedCourses.indexOf(child) != -1"
        ng-click="toggleCheck(child)"
        ng-disabled="required == (planned + completed) && selectedCourses.indexOf(child) == -1"
        value=""
    />
/>

It will only disable if the previous condition is met and it is not selected.

Upvotes: 1

Related Questions