AngularJS에서 양식을 제출 한 후 테이블 업데이트

사용자로부터 두 개의 입력 값을 받아서 JSON을 반환하는 PHP에 제출하는 angularJS의 기본 양식을 구현했습니다. 테이블에 JSON 값을 삽입하고 싶습니다.AngularJS에서 양식을 제출 한 후 테이블 업데이트

ng-repeat를 사용해 보았지만 컨트롤이 원래 형식으로 되돌아 가지 않는 것으로 보입니다.

결과를 HTML 페이지의 표에 표시 할 수 있습니까?

HTML 페이지

<!DOCTYPE html> 
<head> 
    <title> step 4</title> 
</head> 

<body ng-app="myApp"> 

     <form name="saveTemplateData" action="#" ng-controller="FormCtrl" > 

      First name: <br/><input type="text" ng-model="form.firstname"> <br/><br/> 
      <input type="text" ng-model="form.firstname1"> 
      <input type="submit" id="submit" value="Submit" ng-click="submitForm()"/> 

     </form> 
<ul> 
     <li ng-repeat="friend in friends"> 
      {{friend.AC_NO}}, {{friend.house_no_en}} 
     </li> 
    </ul> 

    <script src="angular.min.js"></script> 
    <script src = "step4.js"></script> 
</body> 
</html>

자바 스크립트 (step4.js) 당신의 $http 요청이 실제로 당신이 후있는 데이터를 반환 않으며, $scope.friends 할당이 발생하면

이

var app = angular.module('myApp', []); 
app.controller('FormCtrl', function ($scope, $http) { 

    $scope.formData = { 
     firstname: "default", 
     firstname1: "default" 
    }; 

    $scope.save = function() { 
     formData = $scope.form; 
    }; 

    $scope.submitForm = function() { 
     console.log("posting data...."); 
     $scope.formData = $scope.form; 

     $http({method:'GET', url:'http://127.0.0.1/testjson.php', params:{firstname:$scope.formData.firstname, firstname1:$scope.formData.firstname1}}).success(function(data){ 
      //var pretty; 
      $scope.friends = data.response.docs; 

      var str = JSON.stringify(data, undefined, 2); 
      //document.write(str); 

     }).error(function(data, status, headers, config) { 

      alert(status); 
      }); 
    }; 
});

출처

2014-02-24 krammer

, 다음 문제는 가능성이 높습니다 컨트롤러가 <form>에 있다고 선언했습니다. 대신 ng-controller 코드를 body 태그로 이동하거나 양식과 목록을 캡슐화하는 div를 만듭니다.

$scope.friends = data.response.docs;을 할당하면 FormCtrl의 범위에보기의 목록에 액세스 할 권한이 할당됩니다.

출처

2014-02-24 13:16:32

AngularJS에서 양식을 제출 한 후 테이블 업데이트

답변

관련 문제