ng-submit을 위해 ng-model과 name을 모두 제공해야하는 이유는 무엇입니까?

다음 코드에서는 폼의 정보를 기반으로 고객을 테이블에 추가하고 있습니다. ng-submit을 위해 ng-model과 name을 모두 제공해야하는 이유는 무엇입니까?

내가 입력 요소가 모두 ng-model 및 name을 가지고 있으며, 둘 다 같은 이름을 가지고하지 않는 한 나는이 어디 문서화 찾을 수 없습니다 있지만 ng-submit이 addCustomer()에 양식 변수를 전송하지 않습니다 것을 발견했다.

왜 이런 경우입니까? 그리고 이것은 중복 된 것처럼 보이기 때문에 변수를 올바르게 전달하고 있습니까?

<html ng-app="mainModule"> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
     <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
    </head>  
    <body ng-controller="mainController" style="padding: 20px 0"> 

     <div class="col-lg-12"> 

      <div class="panel panel-success" style="width: 500px"> 
       <div class="panel-heading">Add Customer</div> 
       <div class="panel-body"> 
        <form ng-submit="addCustomer()" role="form"> 
         <div class="form-group"> 
          <label for="firstName">First Name:</label> 
          <input type="text" class="form-control" ng-model="firstName" name="firstName"/> 
         </div> 
         <div class="form-group"> 
          <label for="lastName">Last Name:</label> 
          <input type="text" class="form-control" ng-model="lastName" name="lastName"/> 
         </div> 
         <button type="submit" class="btn btn-default">Add</button> 
        </form> 
       </div> 
      </div> 
      <div class="panel panel-info" style="width: 500px"> 
       <div class="panel-heading">Customers</div> 
       <table class="table-striped table-bordered table table-hover"> 
        <tr> 
         <th>ID</th> 
         <th>First Name</th> 
         <th>Last Name</th> 
        </tr> 
        <tr ng-repeat="customer in customers"> 
         <td>{{customer.id}}</td> 
         <td>{{customer.firstName}}</td> 
         <td>{{customer.lastName}}</td> 
        </tr> 
       </table> 
      </div> 

     </div> 
     <script> 
        var mainModule = angular.module('mainModule', []); 
          function mainController($scope) { 
           $scope.idCount = 1; 
           $scope.customers = []; 

           $scope.addCustomer = function() { 
            $scope.customers.push({id: $scope.idCount++, firstName: this.firstName, lastName: this.lastName}); 

           }; 
          } 
     </script> 
    </body> 
</html>

출처

2015-01-07 Edward Tanguay

ng-model 및 $ scope를 사용하여 양식 데이터에 액세스하십시오. –

일반적으로 고객 개체를 만든 다음 ngModel을 해당 속성에 바인딩합니다. 당신의 ngController에서

, 당신의 newCustomer 초기화 : 당신의 HTML에서

var mainModule = angular.module('mainModule', []); 
mainModule.controller('mainController', function ($scope) { 
     $scope.idCount = 1; 
     $scope.customers = []; 
     $scope.newCustomer = { id: $scope.idCount, firstName:'', lastName:''}; 
     $scope.addCustomer = function (customer) {  
      $scope.customers.push(customer); 
      $scope.newCustomer = { id:++$scope.idCount, firstName:'', lastName:''}; 

     }; 
}

을 고객의 이름과 성 poperties에 ngModel 바인딩 - 당신이 양식 유효성 검사를 할 필요가없는, 이름 속성은 필요하지 않습니다.

<form ng-submit="addCustomer(newCustomer)" role="form"> 
     <div class="form-group"> 
      <label for="firstName">First Name:</label> 
      <input type="text" class="form-control" ng-model="newCustomer.firstName" /> 
     </div> 
     <div class="form-group"> 
      <label for="lastName">Last Name:</label> 
      <input type="text" class="form-control" ng-model="newCustomer.lastName"/> 
     </div> 
     <button type="submit" class="btn btn-default">Add</button> 
</form>

출처

2015-01-07 14:00:35 pixelbits

완벽한 덕분에 훨씬 더 의미가 있습니다. –

ng-submit을 위해 ng-model과 name을 모두 제공해야하는 이유는 무엇입니까?

답변

관련 문제