Angularjs模态怪怪与复选框 [英] Angularjs modal acting weird with checkboxes

问题描述

我有一个角应用此 plunker 。

当我们点击按钮，它会打开与项目列表的模态对话框。这些项目中的2是$ P $基于在复选框表格输入的条件对检查。

When we click on the button, it opens a modal dialog with a list of items. 2 of these items are pre-checked based on the condition in the checkbox table input.

这是推动和拼接功能：

$scope.toggleCheck = function (course) {
    //debugger
    var x = $scope.checkplanneddetails(course);
    if ($scope.selectedCourses.indexOf(course) === -1){
        $scope.selectedCourses.push(course);
        $scope.planned += 3;
    } else {
        $scope.selectedCourses.splice($scope.selectedCourses.indexOf(course), 1);
        $scope.planned -= 3;
    }

    $scope.getPercentage();
};

在选择一门课程从这个名单（选中），它增加了3到 $ scope.planned ，也相应增加了进度条。同样它也降低了同样的方式，当一个复选框被选中。

When a course is selected(checked) from this list, it adds 3 to the $scope.planned and also increases the progress bar accordingly. Similarly it also reduces in the same way when a checkbox is unchecked.

但此功能在逆向发生于那些的项目已经检查当模态对话框负载。哪里code回事？

But this functionality happens in reverse for the items that are already checked when the modal dialog loads. Where is the code going wrong?

推荐答案

是你想持有attitional阵列复选框状态的问题。相反，你应该只使用NG-指令（如NG-模型或NG-检查复选框）

the problem is you're trying to hold state of checkboxes in attitional array. Instead you should only use "ng-" directives (like ng-model, or ng-checked for checkboxes)

http://plnkr.co/edit/Nm9N2zdBZL7IubMCatjz?p=$p$ PVIEW

这是我的修改：

        $scope.toggleCheck = function (course) {
            //debugger
                if(course.checked){
                    $scope.planned += 3;
                } else {
                    $scope.planned -= 3;
                }


                $scope.getPercentage();
        };

和也我已经改变了NG-点击为NG-改变，因为第一个是价值的实际变化之前触发

and also i've changed "ng-clicked" for "ng-changed", because the first one is triggered before actual change of value

这篇关于Angularjs模态怪怪与复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！