Question

我正在使用AngularJS编写的网站上工作。在其中一个页面上，有一个按钮可以打开“页面属性”对话框，允许用户更改他们当前正在查看的页面的某些属性。

我想在该对话框中添加一个复选框，当选中该对话框时，会将当前页面设置为网站的主页/默认页面（即，当用户点击网站徽标或任何“主页”面包屑时给定页面，然后应该将它们带到他们选中“设为主页”复选框的页面，而不是默认主页。

我已经在对话框中添加了复选框，现在我正在测试它，看看我是否可以捕获它是否已经被正确检查，然后我实际编写了将主页实际设置为用户选择的功能，而不是默认。

对话框的Angular标记为：

<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>
    ...

此标记正确显示复选框 - 当我单击按钮打开对话框时，我可以看到我添加的复选框显示时带有标签和文本旁边的＆amp;我可以选择/取消选择它。

我现在开始考虑在选中复选框时编写实际将主页更改为所选页面所需的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()语句都显示未选中该复选框，无论我是否实际选择了该复选框。

如何正确捕获复选框的值，以便在选中复选框时，用户点击“确认”按钮，我可以将网站的主页更改为当前页面？

Answer 1

您应该在复选框中使用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>
...

<强> JS

...
    $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()");
        }
    };
...

Answer 2

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

把ng-model =“homepageCheckbox”放进去，然后在你的控制器中，检查一下：

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

JavaScript / AngularJS - 选中复选框时执行功能

2 个答案: