【问题标题】:How can I clear the input field in AngularJS如何清除AngularJS中的输入字段
【发布时间】:2014-05-25 14:05:48
【问题描述】:

通过 ngClick 提交后,我试图清除 html 页面上的输入文本字段。

<html ng-app="myApp">
<head lang="en">
<title>Test</title>
<script>
 angular.module("myApp", [])
            .controller("defaultCtrl", function ($scope) {
                $scope.members = [
                    {name: "Joe", age: 24},
                    {name: "Jane", age: 22}
                ];

                $scope.newMember = {};

                $scope.addMember = function (member) {
                    $scope.members.push(member);
                }
            });
</script>
</head>
<body ng-controller="defaultCtrl">
<table class="table table-bordered">
<thead>
    <td>Name</td>
    <td>Age</td>
    <td></td>
</thead>
<tbody>
<tr  ng-repeat="member in members">
    <td>{{member.name}}</td>
    <td>{{member.age}}</td>
</tr>
<tr>
    <td>
        <input type="text" ng-model="newMember.name" />
    </td>
    <td>
        <input type="text" ng-model="newMember.age" />
    </td>
    <td>
        <button class="btn btn-xs" ng-click="addMember(newMember)">Add</button>
    </td>
</tr>
</tbody>
</table>
</body>
</html>

这里是 jsFiddle 中的a link to the sample

我不希望新的姓名/年龄字段显示为预先填充了我在单击添加后添加的姓名/年龄输入。

谢谢。

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    只需重新初始化 newMember 对象就可以了

       $scope.addMember = function (member) {
           $scope.members.push(member);
           $scope.newMember = {};
       }
    

    见小提琴http://jsfiddle.net/cmyworld/G6M8q/

    【讨论】:

    • 我正在尝试使用 ngResource 在 RESTful 创建调用中执行相同的重新初始化,但它不起作用。有什么建议么?谢谢。
    • 最可能的原因是您正在重新初始化一些其他变量,而不是绑定到您的视图的变量。
    猜你喜欢
    • 2017-04-09
    • 1970-01-01
    • 1970-01-01
    • 2017-01-17
    • 1970-01-01
    • 2013-11-28
    • 1970-01-01
    • 2021-09-27
    • 2016-07-20
    相关资源
    最近更新 更多