Angular with querystring

Question

** angular newbie alert **

I have a web page that is called with several querystring values.

I would like to populate a couple of data binding areas with values coming in from the querystring.

<span class="username">{{firstName}}{{lastName}}</span>

and i am parsing the querystring using this

  var vars = [], hash;
  var q = document.URL.split('?')[1];
  if (q != undefined) {
    q = q.split('&');
    for (var i = 0; i < q.length; i++) {
      hash = q[i].split('=');
      vars.push(hash[1]);
      vars[hash[0]] = hash[1];
    }
  }

  alert(vars['lastName']);

I am not sure how to actually drive the values into the data binding fields.

there are plenty of Angular tutorials online have you tried looking at some and trying to understand how AngularJS works..? — MethodMan
– MethodMan, Commented Jun 6, 2016 at 19:10
Yes, the tuts are great... but in the question, i have not found a solution that i have outlined above. I placed a textbox at the bottom of the page, and updated the textbox with the value from the querystring, nothing was updated in the bound-data field - until i manually enter a value into the textbox by hand, and then it updates the {{lastName}} so what i need to do is replace the part of putting the value into the textbox, the changing the text for it to display. — pithhelmet
– pithhelmet, Commented Jun 6, 2016 at 20:01

Don · Accepted Answer · 2016-06-06 20:21:34Z

1

Use $location provider from angular.

You can do var searchObject = $location.search();

Then get key of this object. Like searchObject.lastName

angular.controller("ctrl",['$location',function($location){ /**Ctrl code **/

}]);

edited Jun 6, 2016 at 20:21

answered Jun 6, 2016 at 19:09

Don

1,3341 gold badge10 silver badges19 bronze badges

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

5 Comments

pithhelmet Over a year ago

I tried this direction the first time, but i get an error that $location is undefined. both inside the jquery(document).ready code block and outside.

Don Over a year ago

are you using angular ? you must inject $location inside you controller

pithhelmet Over a year ago

yes - i added this code to verify it is working <span class="username">{{firstName}}{{lastName}}{{1 + 2}}</span> and 3 is displayed

pithhelmet Over a year ago

please explain how DI would be implemented in the question

Don Over a year ago

you would do angular.controller("ctrl",['$location',function($location){}]); Check answer

pithhelmet · Accepted Answer · 2016-06-07 14:08:08Z

I had to go with several portions from several tuts along with a hammer to get something into place.

That being said, placement of the code is particularly important.

a majority of the code has to be done at the beginning of the page, and in the head section.

the suggestion for the $location was a good one, but it seemed to fail each time i placed it into the code block.

Here is the primary code block...

  <script>

var dashboardApp = angular.module('dashboardApp', []);
dashboardApp.controller('userNameCtrl', function ($scope) {

  var vars = [], hash;
  var q = document.URL.split('?')[1];
  if (q != undefined) {
    q = q.split('&');
    for (var i = 0; i < q.length; i++) {
      hash = q[i].split('=');
      vars.push(hash[1]);
      vars[hash[0]] = hash[1];
    }
  }

  $scope.firstName = vars['firstName'];
  $scope.lastName = vars['lastName'];
});

<body ng-app="dashboardApp">

<span class="username" ng-controller="userNameCtrl">{{firstName}} {{lastName}}</span>

This code block fails with no error messages, but it crashes way out, and blows out the remaining javascript block

    var dashboardApp = angular.module('dashboardApp', []);

dashboardApp.controller('userNameCtrl', function ($scope, $location) {

  alert("First Name is - " + $location.search()['firstName']);

  var vars = [], hash;
  var q = document.URL.split('?')[1];
  if (q != undefined) {
    q = q.split('&');
    for (var i = 0; i < q.length; i++) {
      hash = q[i].split('=');
      vars.push(hash[1]);
      vars[hash[0]] = hash[1];
    }
  }

  $scope.firstName = vars['firstName'];
  $scope.lastName = vars['lastName'];
});

Collectives™ on Stack Overflow

Angular with querystring

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related