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複選框 - 如何設置其布爾值？

回答

相關問題