Angular JS pre-populate form using url parameters

Question

I have the following angular controller:

'use strict';
angular.module("generatorApp").controller('demogController',['$scope','$location','$http',function($scope, $location, $http){
        $scope.submit=function(){
        var feet=$scope.feet;
        var inches=$scope.inches;
        var isMale = false;

        if($scope.gender == 'male'){
            isMale = true; 
        }else{
            isMale = false;
        };

        var data = {
            emailId:$scope.emailId,
            gender:isMale,      
            heightCm: 2.54 *(this.feet * 12 + this.inches)      
        };

        localStorage.setItem('demogData', JSON.stringify(data));

    };  
}]);

Now here's the html:

<table>
<tr>
    <th> feet </th>
    <th> inches </th>
</tr>
<tr>
    <td><input type="number" ng-model="feet" placeholder="ft" name="feet" id="feet"></td>
    <td><input type="number" ng-model="inches" placeholder="in" name="inches" id="inches"><td>
</tr>   
</table>

And so on for email and some other entries. I am trying to pre-populate these table entries by using a url string of the following format:

https://blahblah.com/form?feet=x&inches=y

So if the following string were entered, by forms would be populated already. Any suggestions would be appreciated.

mcgraphix · Accepted Answer · 2016-08-15 17:26:33Z

1

You can get the query string params with:

$scope.feet = $location.search().feet;

It is usually suggested that the models you use for your ng-model be properties of an object. For example:

$scope.formModel = {
    feet: $locaion.search().feet,
    inches: $location.search().inches
};

Then reference them this way:

<tr>
<td><input type="number" ng-model="formModel.feet" placeholder="ft" name="feet" id="feet"></td>
<td><input type="number" ng-model="formModel.inches" placeholder="in" name="inches" id="inches"><td>
</tr>

answered Aug 15, 2016 at 17:26

mcgraphix

2,7331 gold badge14 silver badges15 bronze badges

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

1 Comment

Zohair Zaman Over a year ago

So I added the following snippet of code to my angular: $scope.formModel = { feet: $locaion.search().feet, inches: $location.search().inches }; and edited my html accordingly. but that did not do the trick. do I have to remove my starting initializations for this to work? Should I be placing the formmodel in data perhaps?

Collectives™ on Stack Overflow

Angular JS pre-populate form using url parameters

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related