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

标签 javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

我是 Angular 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>

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

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

最佳答案

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

this.user = { name: "" };

关于javascript - Angular JS - 清除后文本框未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37700191/

相关文章:

javascript - 在 React Router v4 中获取未定义的组件

javascript - 创建 Backbone 模型的副本

angularjs - npm install -g karma 错误 MSB4019 : The imported project "C:\Microsoft.Cpp.Default.props" was not found

javascript - 可视化期间谷歌地图错误

javascript - Angularjs-如何查看指令是否处于事件状态/在 dom 中?

php - 如何从 json 数据动态构建无序列表

javascript - 用点符号动态创建对象,如字符串

javascript - 如何 (1) 从 Angular/Bootstrap 下拉列表中获取选定值以及 (2) 显示选定的选项?

javascript - 隐藏元素 'grandparent' 的 Angular 指令

javascript - Angular Material 的垂直 slider 无法正常工作