Question

我正在使用AngularJS编写我的网站的前端，并且当前在特定页面上显示了许多小部件。我希望根据用户是否在单击窗口小部件上的其中一个按钮时打开的对话框中选择了特定复选框来添加隐藏窗口小部件标题的功能。

此复选框的HTML为：

<div data-ng-if="widget.name === 'umw-tag-box'" ng-hide="hideWidgetHeading()">
    ...
    <div class="divider"></div>
    <div class="row ui-checkbox-row">
        <label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
        <div class="col-sm-8 col-xs-6">
            <label class="ui-checkbox">
                <input type="checkbox" name="noWidgetHeading" ng-true-value="true" ng-false-value="false" ngChange="hideWidgetHeading()">
                <span></span>
            </label>
        </div>
    </div>
</div>

在对话框中单击“预览”按钮时调用JS：

var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
//if(widgetHeadingCheckbox == true){
console.log("Value of widgetHeadingCheckbox: ", widgetHeadingCheckbox);
if(widgetHeadingCheckbox){
    console.log("if(widgetHeadingCheckbox) statement entered ");
    hideWidgetHeading();
} else {
    console.log("else of if(widgetHeadingCheckbox) statement entered ");
    hideWidgetHeading();
}

$scope.preview = function(e) {
    function hideWidgetHeading(){
        if(widgetHeadingCheckbox){
            console.log("hideWidgetHeading() called (Widget/ctrl.js line 501) ");
            console.log("Value of widgetHeadingCheckbox (should be true): ", widgetHeadingCheckbox);
            return widgetHeadingCheckbox;
        } else {
            console.log("hideWidgetHeading() called (Widget/ctrl.js line 501) ");
            console.log("Value of widgetHeadingCheckbox (should be false): ", widgetHeadingCheckbox);
            return widgetHeadingCheckbox;
        }
    }
    $timeout(function() { previewDisabled = false; }, 500);
};

目前，无论是否选中该复选框，当我单击对话框上的“预览”按钮时，控制台都会显示以下消息：

widgetHeadingCheckbox的值（应为false）：null

告诉我widgetHeadingCheckbox变量未正确设置，或者在声明复选框时取复选框的值，但未初始化（即null），并且不是当对复选框的值进行任何更改时更新...

确保我的JS函数始终保持HTML复选框元素的正确值的最佳方法是什么，并且在HTML中对元素进行任何更改时更新？

修改

所以，在做了一些研究之后，我终于遇到了AngularJS'$scope.$watch()，似乎是如何为复选框的值更改'事件监听器'。

我尝试在我用于获取HTML复选框元素的widgetHeadingCheckbox变量的声明下添加以下代码：

var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
console.log(widgetHeadingCheckbox);
if(widgetHeadingCheckbox){
    hideWidgetHeading();
} else {
    hideWidgetHeading()
}

function hideWidgetHeading(){
    if(widgetHeadingCheckbox){
        console.log("Value of checkbox in if(): ", widgetHeadingCheckbox);
        return widgetHeadingCheckbox;
    } else {
        $scope.$watch('widgetHeadingCheckbox', function(){
            console.log("Value of checkbox has changed inside $watch() ", widgetHeadingCheckbox);
        }, true)
        return widgetHeadingCheckbox;
    }
}

但是，当我加载页面时，单击打开对话框的按钮，选中复选框（以便检查其值/ true），然后单击对话框上的“预览”按钮，控制台显示输出：

复选框的值已更改（$ watch（）null
内）

我还发现我不应该在HTML中使用复选框的true / false值的引号，因此将其更改为：

<div class="col-sm-8 col-xs-6">
    <label class="ui-checkbox">
        <input type="checkbox" name="noWidgetHeading" ng-true-value= true ng-false-value= false ngChange="hideWidgetHeading()" ng-click="hideWidgetHeading()" ng-model="checkboxModel">
        <span></span>
    </label>
</div>

所以似乎复选框实际上从未被赋予真/假值......为什么会这样？如何设置它才能在JS函数中使用它？

Answer 1

当你使用ng-if时，它就像一个孩子。所以你应该像$ parrent.foo一样访问它......

AngularJS复选框 - 如何设置其布尔值？

1 个答案: