제출 후 양식을 지우십시오.

Question

안녕하세요, 성공적으로 완료 한 후 양식 값을 지우고 싶습니다. HOWW는 구현해야합니다.

<div ng-controller="employeelistController as listControl"> 
     <div class="container form-group" ng-controller="addEmployee as addemp"> 
      <form name="frmEmployee" ng-submit="Add(addemp.employee) && frmEmpbloyee.$valid"> 
       <div class="col-lg-4 ctrmain"> 
        <div class="row"> 
         <div class="col-lg-6"> 
          <strong>Employee No</strong> 
         </div> 
         <div class="col-lg-6"> 
          <input type="number" id="txtEmpId" ng-model="addemp.employee.employeeid" required class="form-control" /> 
         </div> 
        </div> 

        <div class="row"> 
         <div class="col-lg-6"> 
          <strong>FirstName</strong> 
         </div> 
         <div class="col-lg-6"> 
          <input type="text" id="txtfirstName" ng-model="addemp.employee.firstname" required class="form-control" /> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-lg-6"> 
          <strong>LastName</strong> 
         </div> 
         <div class="col-lg-6"> 
          <input type="text" id="txtlastName" ng-model="addemp.employee.lastname" required class="form-control" /> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-lg-6"> 
          <strong>Department</strong> 
         </div> 
         <div class="col-lg-6"> 
          <input type="text" id="txtDept" ng-model="addemp.employee.department" required class="form-control" /> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-lg-6"> 
          <strong>DOB</strong> 
         </div> 
         <div class="col-lg-6"> 
          <input type="date" id="DTdob" ng-model="addemp.employee.dateofbirth" required class="form-control" /> 
         </div> 
        </div> 
        <div class="row"> 
         <input type="submit" id="btnSubmit" class="btn btn-primary value=" save" /> 
        </div> 
       </div> 

이 방법을 구현하는 가장 좋은 방법입니다. 나는 여러 가지 방법을 시도했다. 도와주세요.

$scope.Add = function (emp,$scope) { 

     this.EmployeeObject = angular.copy(emp); 
     employee.push(this.EmployeeObject); 
     $scope.emp = null; 
    } 

이 방법을 구현하는 가장 좋은 방법입니다. 나는 여러 가지 방법을 시도했다. 도와주세요.

Answer 1

먼저 Add 함수의 인수에 $ scope가 필요하지 않습니다. 데모와

$scope.Add = function (emp) {  
    this.EmployeeObject = angular.copy(emp); 
    employees.push(this.EmployeeObject); 
    this.employee=null; 
    $scope.$setPristine(true); 
} 

Answer 2

갱신이

var app = angular.module('app', []); 
 

 
app.controller('MainCtrl', function($scope, $compile) { 
 
    'use strict'; 
 

 
    
 
     $scope.empList = []; 
 
    $scope.addemp = {}; 
 
    $scope.saveEmp = function(){ 
 
     $scope.empList.push($scope.addemp); 
 
     $scope.reset(); 
 
    }; 
 
    $scope.reset = function() { 
 
     $scope.addemp = {}; 
 
     $scope.form.$setPristine(); 
 
    } 
 
});

input.ng-invalid.ng-dirty { 
 
      background-color: #FA787E; 
 
     } 
 
     input.ng-valid.ng-dirty { 
 
      background-color: #78FA89; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
<div ng-controller="MainCtrl"> 
 
     <form name="form" id="form" novalidate ng-submit="saveEmp()"> 
 
      <div class="row"> 
 
     <div class="col-lg-6"> 
 
      <strong>Employee No</strong> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
      <input type="number" id="txtEmpId" ng-model="addemp.employeeid" required class="form-control" /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-6"> 
 
      <strong>FirstName</strong> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
      <input type="text" id="txtfirstName" ng-model="addemp.firstname" required class="form-control" /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-6"> 
 
      <strong>LastName</strong> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
      <input type="text" id="txtlastName" ng-model="addemp.lastname" required class="form-control" /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-6"> 
 
      <strong>Department</strong> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
      <input type="text" id="txtDept" ng-model="addemp.department" required class="form-control" /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-6"> 
 
      <strong>DOB</strong> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
      <input type="date" id="DTdob" ng-model="addemp.dateofbirth" required class="form-control" /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <button type="submit" ng-disabled="form.$invalid ">submit</button> 
 
     <button type="reset" ng-disabled="form.$pristine" ng-click="reset()">reset</button> 
 
    </div> 
 
     </form> 
 
     <p>form: {{addemp | json}}</p> 
 
     <p>empList: {{empList | json}}</p> 
 
     <p>Pristine: {{form.$pristine}}</p> 
 
     <p> <pre>Errors: {{form.$error | json}}</pre> 
 

 
     </p> 
 
    </div></div>

$scope.Add = function (emp) { 
       this.EmployeeObject = angular.copy(emp); 
       employee.push(this.EmployeeObject); 
       $scope.emp = {}; // initialize the form to empty object 
       $scope.frmEmployee.$setPristine(); // set it to as user has not interacted with the form. 
      } 

Answer 3

나는 코드 아래에 텍스트 상자를 삭제했다. 예를 들어 FirstName 텍스트 상자를 지웠습니다.

HTML 섹션

<td ng-show="a"> 
<input type="text" ng-model="e.FirstName" /> 
</td> 

컨트롤러 제

e.FirstName= "";