Angular Form Submit built with ng-repeat

Question

I am trying to build a form with Angular that creates inputs based off fields in a mongoDB using ng-repeat. Im new to angular so I am not quite sure how to execute this properly.

Here is simplified html:

<form ng-controller="SettingsFormCtrl as form" ng-submit="form.processForm()" novalidate>
    <div class="tabs">
        <div class="usertab" ng-repeat="(field,value) in formData.usertab">
             <input ng-model="{{field}}" name="{{field}}" value="{{value}}" required>
             <input type="submit">
        </div>
        <div class="infotab" ng-repeat="(field, value) in formData.infotab">
             <input ng-model="{{field}}" name="{{field}}" value="{{value}}" required>
             <input type="submit">
        </div>
    </div>
</form>

Here is app.js:

function SettingsFormCtrl($scope,$http){
var profile = this;
$http.get("api/profile/").success(function(response) {
    profile.result = response;
});
$scope.formData = profile.result;
$scope.processForm = function() {
    $http.post('pi/profile/submit', $scope.formData) .success(function(data) {
        console.log(data);
        if (!data.success) {
            // if not successful, bind errors to error variables
            alert('succes!');
        } else {
            // if successful, bind success message to message
            alert('no');
        }
    });
};
}
angular
.module('inspinia')
.controller('ProfileCtrl',ProfileCtrl)
.controller('SettingsFormCtrl',SettingsFormCtrl)

And here is the .get Data:

{
 "usertab":
           {
             "username":"Bob",
             "email":"[email protected]"
           },
 "infotab":
           {
             "phone":"988-333-1245",
             "age":"44"
           }
}

Any help is definitely appreciated.

@Fieldset Well this actually doesn't seem to work, and I cant seem to figure it out. — Chaosjosh
– Chaosjosh, Commented Jun 16, 2015 at 21:42
Will usertab and infotab be arrays ? because in your code example it's an object — eroak
– eroak, Commented Jun 16, 2015 at 21:55
they are arrays outputed with json_encode() to match with MongoDB way of storing things as objects — Chaosjosh
– Chaosjosh, Commented Jun 16, 2015 at 22:02
Ok but i don't understand why you're using ng-repeat on a single object. Maybe it's the reason of your issue — eroak
– eroak, Commented Jun 16, 2015 at 22:12

hisabimbola · Accepted Answer · 2015-06-16 22:28:52Z

Your question is not well constructed, but I noticed some errors that can cause your code not to work

In your view, when you are binding values in an attributes you do not need to add the {{}}. Angular will automatic try to parse it as an expression.
In your angular.module I am not sure if this is the whole project, but to declare(create) a module, you need to add an empty array [] or an array filled with your dependencies to the module, without it, angular would think you are trying to inject a module and when it's not found, it would throw error.
Another key thing is that where you are doing $scope.formData is wrong, you are storing the response from the .get in a variable, which is out of angular scope. When the result is available, angular would not know, so to make this work you need to store it directly to the $scope.formData so that angular would update the view as soon as the result is available.

I created a plnkr for this reflecting the changes I made

I hope this answers your question.

Collectives™ on Stack Overflow

Angular Form Submit built with ng-repeat

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