AngularJS 复选框不更新模型

angularJS checkbox not updating the model

本文关键字：模型 更新 复选框 AngularJS      更新时间：2023-09-26

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

.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

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

$scope.mailinglist = false;

普伦克尔

更新的答案：

演示：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

由于其他人已经提供了一个有效的 plnkr，我只会让你知道为什么你的原始版本不起作用。在不使用点表示法的情况下创建属性时，即 mailinglist不是AddUserForm.mailinglist而是在视图的作用域上创建此属性，而不是获取控制器的作用域。使用点表示法或控制器 As 来获取控制器的范围。

通过 Egghead.IO 观看此视频以获取更全面的解释：AngularJS - 点

相关文章：