[![出力画像] [1]] [1]フォーム入力フィールドのクリア
私はJSONファイルからデータを読み込んで表示するWebページを作成しました。私はまた、入力フィールドから入力を受け取り、前のデータと共にそれを表示しています。しかし、Submitボタンをクリックすると、入力フィールドはクリアされず、以前の入力データが残っています。私はフィールドをリセットしていますが、まだ動作していません。
ここに私のコードです。
<!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);
};
});
});
は、この問題を解決するためにHTMLを参照してくださいする必要があり、あなたのバックエンド・コードは、あなたの問題とは何の関係もありません。 – James
私のコードを更新しました。どうぞご覧ください –