JavaScript/AngularJS - 選中複選框時執行功能

我正在使用AngularJS編寫的網站上工作。在其中一個頁面上，有一個按鈕打開「頁面屬性」對話框，允許用戶更改當前正在查看的頁面的某些屬性。JavaScript/AngularJS - 選中複選框時執行功能

我想爲該對話框添加一個複選框，當選中該對話框時，該對話框將當前頁面設置爲該網站的主頁/默認頁面（即，當用戶點擊站點徽標或「家」麪包屑任何給定的頁面，它應該將它們帶到他們檢查'Set as homepage'複選框的頁面，而不是默認主頁。

我已經將複選框添加到對話框中，現在只是測試它，在我實際編寫函數以真正將用戶選擇的主頁設置爲用戶選擇之前，而不是默認情況下，我可以捕獲是否已正確檢查它。

對話框的角標記x是：

<form class="modal-body" role="form" data-ng-submit="confirm($event)" novalidate> 
    ... 
    <div data-ng-show="layout.style === 'grid'"> 
     ... 
     <div class="divider"></div> 
     <div class="row checkbox"> 
      <label class="col-sm-2" data-i18n="Homepage:"></label> 
      <div class="col-sm-10 checkbox"> 
       <label class="checkbox"> 
        <input name="homepageCheckbox" type="checkbox" 
         ng-click="layout.direction='row'" 
         ng-clicked="layout.direction==='row'"> 
        <span data-18n="Set this page as the home page"></span> 
       </label> 
      </div> 
     </div> 
    ...

此標記顯示當我點擊按鈕，打開對話框法正確複選框，我可以看到我已經添加了複選框顯示它的標籤和文字在它旁邊，&我我可以選擇/取消選擇它。

我現在開始着眼於編寫選擇複選框時實際將主頁更改爲選定頁面所需的JS，並認爲我會通過簡單地確保我正確捕獲是否複選框被選中。

要做到這一點，我已經找到了JS功能正在處理對話框，並增加了一些console.log()行吧，嘗試在給定時間顯示的複選框的值：

.controller('PageLayoutPickerCtrl', function($scope, $route, $location, $timeout, Page, umConf, NotifyMgr, DialogMgr) { 
    if($scope.homepageCheckbox == 'true'){ 
     console.log("homepageCheckbox is selected"); 
    } else { 
     console.log("hompageCheckbox is not selected"); 
    } 
    ... 
    $scope.confirm = function(e) { 
     ... 
     if($scope.homepageCheckbox == 'true') { 
      console.log("homepageCheckbox is selected inside $scope.confirm() = function()"); 
     } else { 
      console.log("hompageCheckbox is not selected inside $scope.confirm() = function()"); 
     } 
    }; 
    ... 
})

因此，由於我已經放置了console.log()語句，因此當單擊按鈕以顯示對話框時，應在控制檯中顯示一條語句，說明對話框打開時是否選中該複選框，而另一個語句應在控制檯中顯示，說明在對話框上按下'確認'按鈕後是否選中該複選框。

此刻，這兩個console.log()語句顯示覆選框未被選中，無論我是否實際選擇了它。

如何正確捕獲複選框的值，以便當它被選中並且用戶單擊'確認'按鈕時，我可以將網站的主頁更改爲當前頁面？

來源

2017-07-06 someone2088

'ng-model =「homepageCheckbox」'？ –

同意@NathanP。在評論上面是答案;） – lealceldeiro

你應該在你的複選框使用ng-model這樣的：

HTML

... 
<label class="checkbox"> 
    <input name="homepageCheckbox" type="checkbox" 
      ng-model="checkBoxModel" 
      ng-click="layout.direction='row'" 
      > 
    <span data-18n="Set this page as the home page"></span> 
</label> 
...

... 
    $scope.confirm = function(e) { 
     ... 
     if($scope.checkBoxModel) { 
      console.log("homepageCheckbox is selected inside $scope.confirm() = function()"); 
     } else { 
      console.log("hompageCheckbox is not selected inside $scope.confirm() = function()"); 
     } 
    }; 
...

來源

2017-07-06 13:36:53 lealceldeiro

輝煌，非常感謝。 – someone2088

<input name="homepageCheckbox" type="checkbox" ng-model="homepageCheckbox" 
        ng-click="layout.direction='row'" 
        ng-clicked="layout.direction==='row'">

放NG-模型= 「homepageCheckbox」和你一個重新走好，然後在你的控制器上，檢查這個：

if($scope.homepageCheckbox){ 
    console.log("Checkbox is selected"); 
} 
else{ 
    console.log("Checkbox is not selected"); 
}

來源

2017-07-06 13:37:13

JavaScript/AngularJS - 選中複選框時執行功能

回答

相關問題