2014-05-25 63 views
1

我嘗試在通過ngClick提交它們後清除html頁面上的輸入文本字段。如何清除AngularJS中的輸入字段

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

這裏是a link to the sample在jsFiddle。

我不希望新名稱/年齡字段顯示爲預先填充了單擊添加後我剛剛添加的名稱/年齡輸入。

謝謝。

回答

0

只需重新初始化newMember對象和它的工作

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

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

+0

我試圖做同樣的重新初始化以RESTful創建使用ngResource通話,但它不工作。有什麼建議麼?謝謝。 – ekinmur

+0

最可能的原因是你將重新初始化一些其他變量,而不是綁定到視圖中的變量。 – Chandermani