Question

我是Angular JS的初学者。在创建示例应用程序时，我遇到了下面的问题，一旦使用JavaScript.Below清除它的值是我的代码后文本框没有设置： -

<!DOCTYPE html>
 <html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script>
     var app = angular.module("myApp", []);

     app.controller("myCtrl", function () {

        this.showName = function () {
            this.user = { name: "John" };
        }

        this.clear = function () {

            document.getElementById("name").value = "";

        }
    });
</script>
</head>
<body ng-app="myApp">
 <div ng-controller="myCtrl as ctrl" class="container">

    <input type="button" ng-click="ctrl.showName()" value="Show Name"/>
    <input type="text" id="name" ng-model="ctrl.user.name" />
    <input type="button" value="Clear" ng-click="ctrl.clear()" />

 </div>
</body>

她第一次点击“显示名称”按钮时，我在文本框中输入了名称。但是，如果我通过单击“清除”按钮清除文本框，然后再次单击“显示”按钮，则名称不会被填充在文本框中。任何人都可以告诉我为什么会这样，并且无论如何要解决这个问题？

以下是我在plunkr中的代码 - http://plnkr.co/edit/MXlH2o?p=preview

Answer 1

在您的清除功能中，执行以下代码以清除值。

this.user = { name: "" };

Answer 2

清除这样的名字，

this.clear = function () {
                this.user.name = "";
            }

Answer 3

在控制器中不需要clear（）方法，只需利用angular中的双重绑定，当您单击按钮时将用户名设置为空字符串，因此视图将更新。

<input type="button" value="Clear" ng-click="ctrl.user.name = ''" />

Answer 4

将清除功能更改为此代码

this.clear = function () {
     this.user.name="";
}

Angular JS - 清除后文本框不会更新

4 个答案: