正在清除表單輸入字段

我製作了一個網頁，正在讀取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); 
    }; 
}); 
});

來源

2017-05-28 PRIYAM SHARMA

需要查看HTML來解決這個問題，你的後端代碼無關您的問題。 – James

我已更新我的代碼。請看看 –

您結合與$scope變量的輸入，因此輸入將永遠在你的控制器中的值，所以你需要在你的控制器來使用這些值重置。

在這裏，在你的代碼被清除了錯誤的變量：

$scope.people.last_name=' '; 
$scope.people.first_name=' '; 
$scope.people.email_address=''; 
$scope.people.specialty=''; 
$scope.people.practice_name='';

你需要清除綁定變量，而.people，因爲你只是清除people對象內部的變量在這裏。

所以這就是你需要：

$scope.last_name=''; 
$scope.first_name=''; 
$scope.email_address=''; 
$scope.specialty=''; 
$scope.practice_name='';

來源

2017-05-29 08:24:24

感謝您的解決方案，但我試過你的方法，但它仍然沒有在我的end.I在我的問題中添加了JavaScript代碼。你可以看看它，讓我知道我哪裏錯了。提前致謝。 –

@PRIYAMSHARMA我編輯了我的答案，請檢查它。 –

非常感謝。現在它的工作。 –

首先爲您的表單中添加一個名字，說myForm會（不是必須的，如果你不使用AngularJS的表單驗證）。

<form name="myForm" class="form-horizontal" role="form" ng-submit="addRow()"></form>

下在角控制器addRow()方法，手動重置所有數據模型值和$setPristine()。

$scope.addRow = function() { 
    // Your codes to submit the data to server 
    // ... 

    // Manual Reset 
    $scope.first_name = ''; 
    $scope.last_name = ''; 

    // Set Form Pristine (Not a must if you are not using AngularJS's form validation) 
    $scope.myForm.$setPristine(); 
}

來源

2017-05-29 07:02:50

感謝您的解決方案，但我試過你的方法，但它仍然沒有在我的end.I在我的問題中添加了java腳本代碼。你可以看看它，讓我知道我哪裏錯了。提前致謝。 –

正在清除表單輸入字段

回答

相關問題