Question

我在这个plunkr

中有一个有角度的应用

这里按钮打开一个有表格的模态。选中或取消选中表中的项目时，它会相应地更改进度栏中的值。

在表格下方，它列出了所有已检查的课程。如何相应地绑定此数据，以便在选中复选框时，它还会动态显示此列表中的项目？这是我用来显示这个项目列表的代码：

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

Answer 1

问题是您将相同的项目多次推送到$scope.selectedCourses，这会导致错误（因为ngRepeat项中的重复值），这反过来会导致视图无法更新

要防止多次添加相同的项目，您应该检查它是否已存在于数组中：

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

使用ng-checked="checkplanneddetails(child)时也存在问题，因为checkplanneddetails不是幂等的。您不应该将它与ngChecked一起使用，因为每次$ digest周期都会运行它您应该ngInit而是确保在course.checked = true内的适当位置添加checkplanneddetails（见上文）：

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

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

另请参阅此 short demo 。

Angular js根据复选框动态绑定数据列表

1 个答案: