CODEWITHSUNDEEP
angularjs
webdad3
webdad3

Reputation: 9080

pre-populated form data is undefined in service

jQuery:

$("#inputParentName").val(response.name);

HTML/Angular Form:

<form role="form" ng-submit="addParentService.addParent()">
    <div class="form-group">
        <label for="inputParentName">Name</label><input class="form-control" id="inputParentName" value="" type="text" ng-model="addParentService.inputParentName" />
    </div>
     ...
    <button class="btn btn-default" type="submit">Submit</button>
</form>

The following code when run diplays my name correctly in the input box.

However in my service when I try to see what the value is for inputParentName I get an undefined error. But, when I type something in to the textbox for inputParentName the typed in value displays.

Controller Code:

myapp.controller('AddParentController', function ($scope, addParentService) {
    $scope.addParentService = addParentService;
});

Service Code:

myapp.service('addParentService', function () {
    var vm = this;
    vm.parent = [];

    vm.addParent = function () {
    alert(vm.inputParentName);
    };
});

What can I do differently so I can get the pre-loaded data to register so that my service recognizes the data?

This is just basic code that I'm trying to get working. I realize it isn't pure AngularJS. I am just trying to see how I can get this to work. I will refactor with directives after everything works as I think it should.

Upvotes: 0

Views: 718

Answers (2)

webdad3
webdad3

Reputation: 9080

@jme11 and This Answer gave me the insight to the following way I figured out how to get this to work:

jQuery code for Facebook logic:

    $("#inputParentName").val(response.name);
    $("#inputParentEmail").val(response.email);
    $("#inputParentBirthday").val(response.birthday);

    angular.element(document.getElementById('inputParentName')).scope().$apply();
    angular.element($('#inputParentName')).scope().setName(response.name);
    angular.element($('#inputParentEmail')).scope().setEmail(response.email);
    angular.element($('#inputParentBirthday')).scope().setBirthday(response.birthday);

My Controller code:

$scope.setName = function (val) {
    addParentService.inputParentName = val;
}

$scope.setEmail = function (val) {
    addParentService.inputParentEmail = val;
}

$scope.setBirthday = function (val) {
    addParentService.inputParentBirthday = val;
}

Service Code:

vm.addParent = function () {
    alert(vm.inputParentName);
    alert(vm.inputParentBirthday);
    alert(vm.inputParentEmail);
    alert(vm.inputParentCellPhone);
    alert(vm.inputParentCarrier);
};

Now when I'm adding my Parent the values pre-populated from Facebook are usable in my service code.

Again - Thanks to jme11 for helping me solve this.

Upvotes: 0

jme11
jme11

Reputation: 17374

If you want the initial value to be "something" when the view displays, you can (technically) use ng-init, though the docs tell us expressly NOT to do this.

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

But if you're just trying to test something, ng-init would look like:

<input ng-model="test.val" ng-init="test.val='something'" />

The preferred way though would be to add the value to the controller $scope.

<input ng-model="test.val" />

Then in your controller:

myapp.controller('MyCtrl', function ($scope) {

   $scope.test = {
    val: 'something'
   }

});

Upvotes: 1

Related Questions