模型绑定重置后，Angularjs 电子邮件表单字段未清除/重置

Angularjs email form field not clearing/resetting after model binding reset

本文关键字：字段 表单 清除 重置 电子邮件 Angularjs 绑定 模型      更新时间：2023-09-26

嘿，所以我有一个表格，其中包含三个字段名称，电子邮件和电话。 

    <div ng-show="Nerd.adding">
    <form class="col-sm-6" name="Nerd.nerdAddFrm" novalidate >
        <div class="form-group">
            <label for="inputName">Name</label>
            <input type="text" class="form-control" id="inputName" placeholder="Name" ng-model="Nerd.nerd.name" required >
        </div>
        <div class="form-group">
            <label for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email" ng-model="Nerd.nerd.email" required >
        </div>
        <div class="form-group">
            <label for="inputPhone">Phone</label>
            <input type="text" class="form-control" id="inputPhone" placeholder="Phone" ng-model="Nerd.nerd.phone" required >
        </div>
        <button ng-click="Nerd.saveNerd(Nerd.nerd)"  type="submit" class="btn btn-primary">Submit</button>
        <button ng-click="Nerd.load()"  type="button" class="btn btn-default">Cancel</button>
    </form>
</div>

如您所见，取消按钮在控制器中调用 Nerd.load（） 函数。控制器基本上重置视图并将所有绑定的数据重置到模型中。

    Nerd.load = function () {
    Nerd.editing = false;
    Nerd.adding = false;
    Nerd.nerd = [];
    nerdResource.query(
        function (data) {
            Nerd.nerds = data;
        }
    );
};

你可以看到我把 Nerd.nerd 设置为一个空数组。这应该会清空表单字段数据。它适用于姓名和电话。但是当我回到页面时，它仍然显示上次键入的内容。没有页面重新加载，因为我根据控制器变量显示和隐藏div。EG <div ng-show="Nerd.adding"> .谁能帮我解决这个问题？

我使用的是 angularjs 版本 1.3.14。对此的任何帮助都会很棒。

谢谢。

您需要

将这些变量附加到您的$scope中，如下所示：

 $scope.Nerd.load = function () {
    $scope.Nerd.editing = false;
    $scope.Nerd.adding = false;
    $scope.Nerd.nerd = [];
    nerdResource.query(
    function (data) {
        $scope.Nerd.nerds = data;
    }
    );
};

另外，我认为您应该设置$scope。书到一个空对象，例如：

$scope.Nerd = {};

而不是将其设置为空数组。 与视图交互时需要使用$scope。 这段代码看起来不像它当前编写的方式那样有棱角。

如果你能以某种方式尝试。

Nerd.load = function () {
    Nerd.editing = false;
    Nerd.adding = false;
    Nerd.nerd = [];
    nerdResource.query(
        function (data) {
            Nerd.nerds = data;
            Nerd.nerd = []; // Put here and array make Empty
        }
    );
};

相关文章：