[![输出图像][1]][1]
我制作了一个网页，我在其中从 JSON 文件读取数据并显示它。我还从输入字段中获取输入并将其与以前的数据一起显示。但是当我点击提交按钮时，输入字段没有被清除并且仍然有以前的输入数据。我正在重置字段，但仍然无法正常工作。
这是我的代码。
<!DOCTYPE html>
<html ng-app="Provider List">
<head>
<meta charset="utf-8">
<title>Provider's List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
<script type="text/javascript" src= "script/script.js"></script>
</head>
<body ng-controller="Controller">
<div class="container">
<div class="title">
<h1>Provider Directory</h1>
<h5>v2.0</h5>
</div>
<div class="tableDiv">
<div class="providerList">
<p>Provider List</p>
</div>
<table style="width: 100%;">
<thead>
<tr>
<th ng-click="sortData('last_name')">Last Name <div ng-class="getSortClass('last_name')"></div> </th>
<th ng-click="sortData('first_name')">First Name <div ng-class="getSortClass('first_name')"></div> </th>
<th ng-click="sortData('email_address')">Email <div ng-class="getSortClass('email_address')"></div> </th>
<th ng-click="sortData('specialty')">Specialty <div ng-class="getSortClass('specialty')"></div> </th>
<th ng-click="sortData('practice_name')">Practice Name <div ng-class="getSortClass('practice_name')"></div> </th>
<th ng-click="">Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="peoples in people | orderBy:sortColumn:reverseSort">
<td>{{peoples.last_name}}</td>
<td>{{peoples.first_name}}</td>
<td>{{peoples.email_address}}</td>
<td>{{peoples.specialty}}</td>
<td>{{peoples.practice_name}}</td>
<td><input type="button" value = "Delete" text = "Button" data-ng-click="removeRow($index)"/> </td>
</tr>
</tbody>
</table>
</div>
<div class="quickaddForm">
<form class="form-horizontal" role="form" ng-submit="addRow()">
<label>Create Provider</label>
<div class="form-group">
<label class="col-md-2 control-label">Last Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="last_name"
ng-model="last_name" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="first_name"
ng-model="first_name"required/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<input type="text" class="form-control" name="email_address"
ng-model="email_address" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Specialty</label>
<div class="col-md-4">
<input type="text" class="form-control" name="specialty"
ng-model="specialty" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Practice</label>
<div class="col-md-4">
<input type="text" class="form-control" name="practice_name"
ng-model="practice_name" required/>
</div>
</div>
<div class="form-group">
<div style="padding-left:130px; padding-top:20px">
<input type="submit" value="Submit" class="btn"/>
</div>
</div>
</form>
</div>
</div>
这是 JAVASCRIPT 代码:
var ProviderList = angular.module('Provider List', []);
ProviderList.controller('Controller', function ($scope, $http){
/*
Reading the data from JSON file
*/
$http.get('people.json').success(function(data) {
$scope.people = data.people;
$scope.sortColumn="LastName"
$scope.reverseSort = false;
/*
Sorting the selected column by clicking on the table heading
*/
$scope.sortData = function (column) {
$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
$scope.getSortClass = function (column) {
if ($scope.sortColumn == column) {
return $scope.reverseSort ? 'arrow-down' : 'arrow-up';
} return '';
}
/*
Adding the data in JSON format which was entered in the form fields
*/
$scope.addRow = function(){
$scope.people.push({ 'last_name':$scope.last_name,
'first_name': $scope.first_name,
'email_address':$scope.email_address,
'specialty' :$scope.specialty,
'practice_name': $scope.practice_name
});
/*
To clear the input fields once SUBMIT button is clicked.
*/
$scope.people.last_name=' ';
$scope.people.first_name=' ';
$scope.people.email_address='';
$scope.people.specialty='';
$scope.people.practice_name='';
};
/*
Removing the selected row by clicking the delete button.
*/
$scope.removeRow = function (idx) {
$scope.people.splice(idx, 1);
};
});
});
最佳答案
您将输入与 $scope 变量绑定(bind)，因此输入将始终具有 Controller 中的值，因此您需要在 Controller 中重置这些值。
在您的代码中，您清除了错误的变量:
$scope.people.last_name=' ';
$scope.people.first_name=' ';
$scope.people.email_address='';
$scope.people.specialty='';
$scope.people.practice_name='';
您需要清除没有 .people 的绑定(bind)变量，因为您只是在此处清除 people 对象中的变量。
这就是你需要的:
$scope.last_name='';
$scope.first_name='';
$scope.email_address='';
$scope.specialty='';
$scope.practice_name='';
关于javascript - 清除表单输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44232114/