Updating table after form submit in AngularJS

Question

I have implemented a basic form in angularJS that takes two input values from a user, submits it to a PHP which returns a JSON. I want to insert the values of the JSON in a table.

I have tried using ng-repeat, but it seems that the control never reaches back to the original form.

Is it possible to display the results in a table in an HTML page ?

HTML Page

<!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);
            });
    };
});

Matt Way · Accepted Answer · 2014-02-24 13:16:32Z

2

If your $http request does indeed return the data you are after, and the $scope.friends assignment occurs, then your problem is likely that you have declared your controller to be on the <form> itself. Instead move the ng-controller code to the body tag for example, or create a div encapsulating both the form and the list.

The reason for the problem, is that when you assign $scope.friends = data.response.docs;, you are assigning to the scope of the FormCtrl that your list in your view doesn't have access to.

answered Feb 24, 2014 at 13:16

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Updating table after form submit in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related