Question

我有一个带复选框的表单，我想在提交时检查其值：

HTML：

       <form class="form-horizontal" role="form" name="AddUserForm" ng-submit="submit(AddUserForm)">
            ...
            <div class="form-group">
                <label for="adduser-email" class="col-xs-2 col-xl-2 control-label">email</label>
                <div class="col-xs-10 col-xl-10">
                    <input type="email" placeholder="email" id="adduser-email" ng-model="AddUserForm.email" required>
                </div>

            </div>
            <div class="col-xs-12 col-xl-12">
                <input id="adduser-mailinglist" type="checkbox" ng-model="AddUserForm.mailinglist">Add to mailing list</input>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10 col-xl-offset-2 col-xl-10">
                    <button class="blue-button" type="submit" class="btn btn-default">Add User</button>
                </div>
            </div>
        </form>

JS：

    $scope.submit = function(AddUserForm) {
        console.log(AddUserForm.mailinglist);
    };

我正在undefined

文本输入正常并存在于表单模型

中

做了一个plunkr： http://plnkr.co/edit/NKow0isUCp8PZy90drmA

Answer 1

您只需要在控制器中初始化复选框的模型：

$scope.mailinglist = false;

plunkr

Answer 2

更新回答：

演示：http://jsfiddle.net/0ukwaug4/

这里有更新html，更新提交（AddUserForm）只提交（），该对象已在范围级别定义：

        <form class="form-horizontal" role="form" name="AddUserForm" ng-submit="submit()">
            ...
            <div class="form-group">
                <label for="adduser-email" class="col-xs-2 col-xl-2 control-label">email</label>
                <div class="col-xs-10 col-xl-10">
                    <input type="email" placeholder="email" id="adduser-email" ng-model="AddUserForm.email" required>
                </div>

            </div>
            <div class="col-xs-12 col-xl-12">
                <input id="adduser-mailinglist" type="checkbox" ng-model="AddUserForm.mailinglist">Add to mailing list</input>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10 col-xl-offset-2 col-xl-10">
                    <button class="blue-button" type="submit" class="btn btn-default">Add User</button>
                </div>
            </div>
        </form>

javascript：

    $scope.submit = function() {
        console.log($scope.AddUserForm.mailinglist);    
    };

取消选中后，您将获得undefined，但检查时会true。

GL

Answer 3

正如其他人已经提供了一个有效的工作人员，我会告诉你原来为什么没有工作。在不使用点表示法创建属性时，即mailinglist而不是AddUserForm.mailinglist，您将在视图的范围内创建此属性，而不是获取控制器的范围。使用点符号或Controller As来获取控制器的范围。

观看Egghead.IO观看此视频，以获得更全面的解释： AngularJS - The Dot

angularJS复选框不更新模型

3 个答案: