在AngularJS中提交表單後更新表格

我已經在angularJS中實現了一個基本表單，該表單接受來自用戶的兩個輸入值，並將其提交給返回JSON的PHP。我想在表中插入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>

使用Javascript（step4.js）

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

如果您$http要求確實回報你之後的數據，和$scope.friends分配發生，那麼你的問題很可能你已經宣佈你的控制器在<form>本身。例如，將ng-controller代碼移到body標籤中，或者創建一個封裝了表單和列表的div。

問題的原因是，當您指定$scope.friends = data.response.docs;時，您正在將FormCtrl的範圍指定爲您的視圖中的列表無權訪問。

來源

2014-02-24 13:16:32

在AngularJS中提交表單後更新表格

回答

相關問題