2012-08-27 33 views
5

tôi muốn tuần tự hóa dữ liệu biểu mẫu trong angularjs. Sau đây là các mã điều khiển:angularjs serialize dữ liệu biểu mẫu

function SearchCtrl($scope, $element, $http) { 
     $scope.url = 'php/search.php'; 
     $scope.submit = function() { 
      var elem = angular.element($element); 
      //var dt = $(elem.parent()).serialize(); 
      console.log($(elem.parent()).serialize()); 
      $http({ 
       method: 'POST', 
       url: $scope.url, 
       data: 'first=hgf&last=ghfgh', 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
      }).success(function(data, status) { 
       $scope.status = status; 
       $scope.data = data; 
       $scope.result = data; // Show result from server in our <pre></pre> element 
       //var elem = angular.element(e.srcElement); 
       //alert($(elem.parent()).serialize()); 
      }).error(function(data, status) { 
       $scope.data = data || "Request failed"; 
       $scope.status = status; 
      }); 
      return false; 
     }; 
} 

chỉnh sửa:

<!DOCTYPE html> 
<html ng-app> 
<head> 
<title>Search form with AngualrJS</title> 
     <script src="../angular-1.0.1.min.js"></script> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
     <script src="js/search.js"></script> 



</head> 
<body> 
     <div> 
     <form ng-controller="SearchCtrl" ng-submit="submit()"> 
      <label>Search:</label> 
      <input type="text" ng-model="keywords" placeholder="enter name..."> 
      <input type="text" ng-model="desc" placeholder="enter description..."> 
      <button type="submit">Search</button> 
      <p>Try for example: "php" or "angularjs" or "asdfg"</p> 
     </form> 
<pre ng-model="result"> 
{{result}} 
</pre> 
    </div> 
</body> 

</html> 

nhưng không được in trên bàn điều khiển. Tôi làm sai ở đâu?

+0

chỉnh sửa nội dung để bao gồm html. – z22

+0

Tôi tự hỏi tại sao '$ (elem.parent()). Serialize())' được sử dụng thay vì chỉ '$ (elem) .serialize()'. Không phải nguyên tố $ ở đây là '

' một? – raina77ow

+0

tôi đã thử với $ (elem) .serialize(), vẫn không có kết quả! những gì shpuld tôi làm gì? – z22

Trả lời

8

Từ doc:

Đối với giá trị một yếu tố hình thức để được bao gồm trong chuỗi tuần tự, nguyên tố này phải có một thuộc tính tên.

Trong đầu vào HTML của bạn không có tên, do đó serialize trả về một chuỗi trống. Sửa lỗi này với một cái gì đó giống như ...

<input type="text" name="keywords" ng-model="keywords" placeholder="enter name..."> 
<input type="text" name="desc" ng-model="desc" placeholder="enter description..."> 

Và, btw, bạn không cần phải quấn góc $element vào chức năng jQuery: $element.serialize() sẽ làm việc ok.

Demo.

+0

$ element.serialize() không hoạt động một mình, nó mang lại cho tôi Object [[object HTMLFormElement]] không có lỗi 'serialize' của phương thức trong chrome console – z22

Các vấn đề liên quan