I am trying to clear the input text fields on the html page after I submit them via ngClick.
<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>
Here is a link to the sample in jsFiddle.
I do not want the new name/age fields to appear as pre-populated with the name/age inputs that I just added after clicking Add.
Thanks.
Just reinitialize the newMember object and it would work
$scope.addMember = function (member) {
$scope.members.push(member);
$scope.newMember = {};
}
See fiddle http://jsfiddle.net/cmyworld/G6M8q/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.