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

我正在使用AngularJS编写我的网站的前端，并且当前有一些小部件显示在特定页面上。我正在寻找添加功能来隐藏小工具的标题，根据用户是否在点击小工具上的某个按钮时打开的对话框上选择了特定的复选框。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的UE（应该是假的）：空

告诉我，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（内部）中，）null

我还发现，我不应该在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函数中使用它？

来源

2017-07-18 someone2088

我编辑了我的帖子以显示解决问题的尝试。 – someone2088

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

来源

2017-07-18 11:58:44

我不知道我明白...访问类似'$ parent.foo'的东西吗？ 'widgetHeadingCheckbox'？如果是这样，它的父母是什么？ '$ scope'？它是在'$ scope.preview（）'函数内部定义的，这是我尝试访问它的地方，所以它应该可用于我尝试使用它的地方......我给'$ scope.widgetHeadingCheckbox'尽管如此，以防万一 - 但得到同样的问题... – someone2088

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

回答

相关问题