Javascript Angular JS-清除后未更新文本框_Javascript_Angularjs_Angularjs Directive_Angularjs Scope_Angularjs Ng Repeat

Javascript Angular JS-清除后未更新文本框

javascript angularjs

Javascript Angular JS-清除后未更新文本框,javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Repeat,我是一个初学者在角JS。在创建示例应用程序时，我遇到了以下问题：使用JavaScript清除文本框中的值后，文本框无法设置。下面是我的代码：- <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/an

我是一个初学者在角JS。在创建示例应用程序时，我遇到了以下问题：使用JavaScript清除文本框中的值后，文本框无法设置。下面是我的代码：-

<!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>


var-app=angular.module（“myApp”，[]）；
应用程序控制器（“myCtrl”，函数（）{
this.showName=函数（）{
this.user={name:“John”}；
}
this.clear=函数（）{
document.getElementById（“名称”）.value=“”；
}
});

第一次单击“显示姓名”按钮时，我会在文本框中获取姓名。但是，如果我通过单击“清除”按钮清除文本框，然后再次单击“显示”按钮，则文本框中不会填充姓名。有人能告诉我为什么会发生这种情况，以及如何解决这个问题吗

这是我在plunkr中的代码-

在清除函数中执行以下代码以清除值

this.user = { name: "" };

在清除函数中，执行以下代码以清除值

this.user = { name: "" };

像这样清除名称

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

像这样清除名称

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

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

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

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

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

将清除功能更改为此代码

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

将清除功能更改为此代码

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

@Bamnaam，你能告诉OP他这么做的原因吗？Stackoverflow中的答案应该非常清晰和描述性。所以记住这一点。@Bamnaam，你能告诉OP他这样做的原因吗？Stackoverflow中的答案应该非常清晰和描述性。所以记住这一点，谢谢你。这是可行的，但你能告诉我为什么我的代码不起作用吗？是的，事实上，当你通过获取元素清除任何字段时，在这种情况下ng模型被阻止，然后双向绑定不起作用，这就是为什么它不起作用。谢谢。这是可行的，但你能告诉我为什么我的代码不起作用吗？是的，事实上，当你通过获取元素清除任何字段时，在这种情况下ng模型被阻止，然后双向绑定不起作用，这就是为什么它不起作用。谢谢Karim。但是你能告诉我为什么我上面的代码不起作用吗？嗯，我只是不认为这是使用angular的正确方法。对于angular，您不应该以这种方式操纵dom，以避免与本机javascript发生冲突，而应该使用提供的工具。干杯，汉克斯·卡里姆。但是你能告诉我为什么我上面的代码不起作用吗？嗯，我只是不认为这是使用angular的正确方法。对于angular，您不应该以这种方式操纵dom，以避免与本机javascript发生冲突，而应该使用提供的工具。干杯