当满足条件时，Angular表禁用开关

Angular table disabling toggles when condition is met

本文关键字：开关 Angular 满足 条件      更新时间：2023-09-26

我有一个angular应用程序，我定义了一个表如下:

<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>

在app.js(controller)中，我定义了以下函数，以便在满足上述条件后切换会自动禁用。

$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();
};

到目前为止，一切都很顺利，一旦满足条件，表就会禁用切换。但是当表禁用时，它甚至禁用了checked toggle，这是有意义的。我如何确保禁用只发生在未检查的切换，而不是检查的?

您需要检查ng-checked是否为true。

<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=""
    />
/>

只在满足上述条件时才会禁用且未选中

相关文章：