正在清除表单输入字段

我制作了一个网页，正在读取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脚本代码。你可以看看它，让我知道我哪里错了。提前致谢。 –

正在清除表单输入字段

回答

相关问题