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

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()，这似乎是如何添加一个“事件侦听器”来更改复选框的值。

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

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

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

复选框的值已更改（在 $watch() 内为空

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

<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 一样访问它...