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

时间:2015-03-13 16:33:11

标签: javascript angularjs angular-ngmodel

嘿所以我的表格有三个字段名称,电子邮件和电话。

    <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。对此的任何帮助都会很棒。

感谢。

2 个答案:

答案 0 :(得分:0)

您需要将这些变量附加到$ 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.Nerd设置为一个空对象,如:

$scope.Nerd = {};

而不是将其设置为空数组。在与视图交互时,您需要使用$ scope。此代码看起来并不像当前所写的那样。

答案 1 :(得分:0)

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

&#13;
&#13;
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
        }
    );
};
&#13;
&#13;
&#13;