[! [выходное изображение] [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);
    };
});
});
0
PRIYAM SHARMA 29 Май 2017 в 00:17

2 ответа

Лучший ответ

Вы связываете свои входные данные с переменными $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='';
1
cнŝdk 29 Май 2017 в 14:41

Сначала добавьте имя для вашей формы, скажем, myForm (не обязательно, если вы не используете проверку формы AngularJS).

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

В методе addRow() вашего контроллера Angular вручную сбросьте все значения модели данных и $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();
}
0
Ryan Tsui 29 Май 2017 в 07:02