source

angularjs를 사용하여 폼을 연재할 수 있는 더 효과적인 방법이 있나요?

manycodes 2023. 3. 2. 22:21
반응형

angularjs를 사용하여 폼을 연재할 수 있는 더 효과적인 방법이 있나요?

angularjs의 함수를 직렬화하는 방법이 있습니까?

제 게시물은 지금 이렇게 되어 있어요.

$scope.signup_submit = function () {
  var formData = {
    username: $scope.username,
    full_name: $scope.full_name,
    email: $scope.email,
    password: $scope.password,
    confirm_password: $scope.confirm_password
  }

  $http({
    method: "POST",
    url: '/signup',
    data: formData,
  }).success(function (data) {
    if (data.status == 'success') {
      alert('all okay');
    } else {
      alert(data.msg)
    }
  });
}

이는 AngularJS를 사용하여 양식 데이터에 액세스하는 방법이 아닙니다.폼의 데이터는 범위 내에서 바인드되어야 합니다.

따라서 $scope와 같은 개체를 사용합니다.모든 데이터 구조를 포함하는 formData는 ng-model을 사용하여 각 폼 요소를 여기에 바인드해야 합니다.

예:

http://jsfiddle.net/rd13/AvGKj/13/

<form ng-controller="MyCtrl" ng-submit="submit()">
    <input type="text" name="name" ng-model="formData.name">
    <input type="text" name="address" ng-model="formData.address">
    <input type="submit" value="Submit Form">
</form>

function MyCtrl($scope) {
    $scope.formData = {};

    $scope.submit = function() {   
        console.log(this.formData);
    };
}

위 양식이 $scope로 제출되었을 때.formData에는 AJAX 요청으로 전달될 수 있는 형식의 개체가 포함됩니다. 예:

Object {name: "stu", address: "england"} 

질문에 답하려면 Angular를 사용하여 양식 데이터를 "직렬화"하는 데 더 좋은 방법은 없습니다.JS.

단, jQuery: $element.serialize()를 사용할 수 있지만 Angular를 올바르게 사용하려면 위의 방법을 사용하십시오.

언급URL : https://stackoverflow.com/questions/15877212/is-there-a-more-effective-way-to-serialize-a-form-with-angularjs

반응형