각도를 재설정하고 각도를 닫습니다.

간단한 양식을 만들어 배열에 새 객체를 추가합니다. 그러나, 내가 뜨거운 제출하면 내 양식을 재설정하고 자동으로 닫고 싶습니다. 양식을 닫았다가 다시 열면 값이 그대로 유지됩니다. 누군가 내가 뭘 잘못하고 있는지 말해 줄 수 있습니까? 감사.각도를 재설정하고 각도를 닫습니다.

HTML 코드

<body>  
<div id="wrapper"> 

<!-- Navigation --> 


<div id="page-wrapper"> 
    <div class="row"> 
     <div class="col-lg-8"> 
      <h1 class="page-header">Inventario</h1> 
     </div> 
    </div> 

    <div class="row"> 
     <div ng-controller="InventoryCtrl"> 

     <div class="container"> 
     <!-- Trigger the modal with a button --> 
      <div class="row"> 
       <div class="col-sm-8"></div> 
       <div class="col-sm-4"> 
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newItemModal">Add New Product</button> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-sm-1"></div>   
       <div class="col-sm-9"><br> 
        <div class="panel panel-default"> 
         <div class="panel-heading"></div> 
        <!-- /.panel-heading --> 
        <div class="panel-body"> 
         <div id="dataTables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"> 
          <div class="row"> 
           <div class="col-sm-8"> 
            <div class="dataTables_length" id="dataTables-example_length"> 
             <label>Show 
              <select ng-model="rowLimit" name="dataTables-example_length" aria-controls="dataTables-example" class="form-control input-sm"> 
               <option value="1">1</option> 
               <option value="3">3</option> 
               <option value="5">5</option> 
               <option value="10">10</option> 
               <option value="20">20</option> 
              </select> entries 
             </label> 
            </div> 
           </div> 

           <div class="col-sm-4"> 
            <div id="dataTables-example_filter" class="dataTables_filter"> 
             <label>Search: 
              <input ng-model="search" type="search" class="form-control input-sm" placeholder="" aria-controls="dataTables-example"> 
             </label> 
            </div> 
           </div> 
          </div> 

         <div class="row"> 
          <div class="col-sm-12"> 
           <table width="100%" class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline" id="dataTables-example" role="grid" aria-describedby="dataTables-example_info" style="width: 100%;"> 
            <thead> 
             <tr role="row"> 
              <th style="width: 50px;" ng-click="sortData('index')">Item Number</th> 
              <th style="width: 50px;" ng-click="sortData('code')">Code</th> 
              <th style="width: 250px;" ng-click="sortData('description')">Description</th> 
              <th style="width: 50px;" ng-click="sortData('in')">In</th> 
              <th style="width: 50px;" ng-click="sortData('out')">Out</th> 
              <th style="width: 50px;" ng-click="sortData('total')">Total</th> 
             </tr> 
            </thead> 

            <tbody> 
             <tr class="gradeA odd" role="row" ng-repeat="product in items | limitTo: rowLimit | filter: search"> 
              <td class="text-center"> 
               <i class="fa fa-pencil-square-o" aria-hidden="true" ng-click="edit(product)" 
               data-toggle="modal" data-target="#editItemModal"></i> 
               <i class="fa fa-trash-o" aria-hidden="true" ng-click="delete(product)"></i>{{1+$index}}</td> 
              <td class="text-center">{{product.code}}</td> 
              <td class="text-left">{{product.description}}</td> 
              <td class="text-center">{{product.in}}</td> 
              <td class="text-center">{{product.out}}</td> 
              <td class="text-center">{{product.total}}</td> 
             </tr> 
            </tbody> 
           </table> 
          </div> 
         </div> 

         </div> 
        <!-- /.table-responsive --> 

        </div> 
        <!-- /.panel-body --> 
        </div> 
      <!-- /.panel --> 
      </div> 
      </div> 
      <!-- Modal --> 
      <div class="modal fade" id="editItemModal" role="dialog"> 
       <div class="modal-dialog"> 

       <!-- Modal content--> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">{{1+$index}}</h4> 
         </div> 

        <div class="modal-body"> 
         <form name="myForm" novalidate> 
          <div class="form-group"> 
           <label for="code">Code:</label> 
           <input type="text" size="5" maxlength="5" class="form-control" name="code" id="code" 
           ng-model="inventoryCtrl.item.code" required> 
           <span ng-show="myForm.code.$touched && myForm.code.$invalid">The code is required.</span>  
          </div> 

          <div class="form-group"> 
           <label for="description">Description:</label> 
           <input type="text" class="form-control" id="description" ng-model="inventoryCtrl.item.description" required> 
           <span ng-show="myForm.description.$touched && myForm.description.$invalid">The description is required.</span> 
          </div> 

          <div class="form-group"> 
           <label for="amount">Amount:</label> 
           <input type="text" size="5" maxlength="5" class="form-control" name="amount" id="amount" 
           ng-model="inventoryCtrl.item.amount" required> 
           <span ng-show="myForm.amount.$touched && myForm.amount.$invalid">The amount is required.</span> 
          </div> 

          <div class="form-group"> 
           <label for="date">Date:</label> 
           <input type="date" class="form-control" name="date" id="date" required> 
           <span ng-show="myForm.date.$touched && myForm.date.$invalid">The date is required.</span>  
          </div> 

          <div class="form-group"> 
           <label for="radio">Type:</label> 
           <div class="radio"> 
            <label><input type="radio" name="optradio" ng-model="type" value="in">In</label> 
            <label><input type="radio" name="optradio" ng-model="type" value="out">Out</label> 
           </div> 
          </div>     
         </form> 
        </div> 

        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="button" class="btn btn-primary">Submit</button> 
        </div> 
        </div> 
       </div> 
      </div> 

      <div class="modal fade" id="newItemModal" role="dialog"> 
       <div class="modal-dialog"> 

       <!-- Modal content--> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Add New Product</h4> 
         </div> 

        <div class="modal-body"> 
         <form name="myForm" ng-submit="addProduct(item)"> 
          <div class="form-group"> 
           <label for="code">Code:</label> 
           <input type="text" size="5" maxlength="5" class="form-control" name="code" id="code" 
           ng-model="item.code" required> 
           <span ng-show="myForm.code.$touched && myForm.code.$invalid">The code is required.</span>  
          </div> 

          <div class="form-group"> 
           <label for="description">Description:</label> 
           <input type="text" class="form-control" id="description" ng-model="item.description" required> 
           <span ng-show="myForm.description.$touched && myForm.description.$invalid">The description is required.</span> 
          </div> 

          <div class="form-group"> 
           <label for="amount">Amount:</label> 
           <input type="text" size="5" maxlength="5" class="form-control" name="amount" id="amount" 
           ng-model="item.amount" required> 
           <span ng-show="myForm.amount.$touched && myForm.amount.$invalid">The amount is required.</span> 
          </div> 

<!--       <div class="form-group"> 
           <label for="date">Date:</label> 
           <input type="date" class="form-control" name="date" id="date" required> 
           <span ng-show="myForm.date.$touched && myForm.date.$invalid">The date is required.</span>  
          </div>--> 

          <div class="modal-footer"> 
           <input type="button" class="btn btn-default" data-dismiss="modal" value="Close" /> 
           <input type="submit" class="btn btn-primary pull-right" value="Submit" /> 

          </div>    

         </form> 
        </div> 

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


     </div> 
    </div> 
    <!-- /.row --> 
</div> 
<!-- /#page-wrapper --> 

</div> 
    <!-- /#wrapper --> 

    <!-- jQuery --> 
    <script src="../vendor/jquery/jquery.min.js"></script> 

    <!-- jQuery --> 
    <script src="../vendor/angular/angular.min.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script> 

    <!-- Metis Menu Plugin JavaScript --> 
    <script src="../vendor/metisMenu/metisMenu.min.js"></script> 

    <!-- Morris Charts JavaScript --> 
    <script src="../vendor/raphael/raphael.min.js"></script> 
    <script src="../vendor/morrisjs/morris.min.js"></script> 
    <script src="../data/morris-data.js"></script> 

    <!-- Custom Theme JavaScript --> 
    <script src="../dist/js/sb-admin-2.js"></script> 

    <!-- My AngularJS App --> 
    <script src="../js/app.js"></script> 

</body> 

</html>

ANGULAR 코드는 변수에 데이터를 바인딩하기 때문이다

(function(){ 
var app = angular.module("inventory", []); 

app.controller("InventoryCtrl", function($scope){ 

    $scope.product = {}; 

    $scope.addProduct = function(product){ 
     $scope.product.createdOn = Date.now(); 
     $scope.product.code = product.code; 
     $scope.product.description = product.description; 
     $scope.product.total = product.amount;   
     $scope.items.push($scope.product); 
     $scope.product = {}; 
    }; 

    $scope.items = [ 
     { 
     code:"FD1", 
     description: "Happy valentines", 
     in: 50, 
     out: 20, 
     total: 30, 
     createdOn: 1397490980837 
     }, 
     { 
     code:"FD2", 
     description: "Happy Mothers Day", 
     in: 70, 
     out: 20, 
     total: 50, 
     createdOn: 1397490980837    
     }, 
     { 
     code:"FD3", 
     description: "I Love You", 
     in: 100, 
     out: 30, 
     total: 70, 
     createdOn: 1397490980837 
     }, 
     { 
     code:"FD4", 
     description: "Get Well", 
     in: 20, 
     out: 5, 
     total: 15, 
     createdOn: 1397490980837 
     }, 
     { 
     code:"FD5", 
     description: "Happy Birthday", 
     in: 200, 
     out: 35, 
     total: 165, 
     createdOn: 1397490980837 
     }, 
     { 
     code:"FD6", 
     description: "It's a Boy", 
     in: 50, 
     out: 10, 
     total: 40, 
     createdOn: 1397490980837 
     }, 
     { 
     code:"FD7", 
     description: "It's a Girl", 
     in: 50, 
     out: 20, 
     total: 30, 
     createdOn: 1397490980837 
     }   
    ]; 
}); 


})();

출처

2017-02-08 Andres Quintero

방법 '$ scope.addProduct' 함수는'$ scope.item = {};'의 밑 부분에 추가합니다. 'item.' 모델의 데이터를'$ scope.product'에 전달하고'addProduct' 함수를 호출 할 때'$ scope.product'를 지우는 것입니다.'$ scope.item'이 아니라 제가 시도했습니다. – pryxen

그것은 작동하지 않았다. 나는 $ scope.item과 $ scope.items로 시도했다. 방금 다시 시도했지만 아직 제출 한 양식을 삭제하지 않습니다. 양식을 닫고 싶습니다. 다른 제안? –

다음과 같이 각도 복사를 사용할 수도 있습니다 :'angular.copy ({}, obj);' –

기본적으로 $scope.product을 지우는 것입니다.가 아닙니다. 양식에모델

$scope.addProduct = function(product){ 
      $scope.product.createdOn = Date.now(); 
      $scope.product.code = product.code; 
      $scope.product.description = product.description; 
      $scope.product.total = product.amount;   
      $scope.items.push($scope.product); 
      $scope.product = {}; 
      $scope.item = { 
       code: '', 
       description: '', 
       amount:'' 
      }; 
     };

아니면 다음 (예를 들어 addFormId)와 같은 양식에 id을 지정하여 addProduct 함수의 맨 아래에 추가 할 수 있습니다

에 대한 document.getElementById("addFormId").reset();

출처

2017-02-08 03:43:09 pryxen

나는 그것을 시도했지만 작동하지 않았습니다. 나는 $ scope.item과 $ scope.items로 시도했다. 방금 다시 시도했지만 아직 제출 한 양식을 삭제하지 않습니다. 양식을 닫고 싶습니다. 다른 제안? –

'$ scope.addProduct'이 코드를 추가하십시오 '$ ('newItemModal '). 모달 ('hide ');' – pryxen

위 코드를 편집합니다 – pryxen

, 당신이 할 수있는 페이지가이

처럼 다시로드를 명시 적으로 명확한 양식 요소

document.getElementById('elementid').value = "";

출처

2017-02-08 03:33:45

각도를 재설정하고 각도를 닫습니다.

답변

관련 문제