How to retrieve value from query string with AngularJS

Question

I got alot of progress in my previous project and needed a final piece of help i just cant seem to get.

I build my whole angular controller with all the data that needs to populate on the page, but i need to filter by a specific value being passed from another page.

I decided to do query string, but i am lost how to retrieve my 2 parameters, 1 being used in this section, 1 being used further down the page. I tried using jquery url (project) but in the jquery call i can't connect it to the angular scope object.

How do i use the resource or the location provider correctly to accomplish this?

url example:http://localhost/Client/activitysubpage.asp?activity=6&day=1 Note:earlier in the page i call the ng-app and the ng-controller directives.

I have the angular library as well as the jquery library loaded. //What i made to grab the url item uses url.js

<script>
        $(document).ready(function () {
           var myactivity =url('?activity');
           var myday = url('?day');
          $scope.currentactivity = myactivity;

//I tried saving the value to a input variable and using ng-bind but it doesnt see the initial value.
// $("#activityitem1").val(myactivity);
        });
                            </script>

<input ng-model="currentactivity" id="activityitem1">
   <h1>NG-MODEL VALUE IS {{currentactivity}}</h1>
 <div class="item item-bg-center-contain">
    <div ng-repeat="items in activities  | filter:{id : myactivity }:true">
          <img ng-src="assets/images/activities/headers/{{items.id}}.jpg" class="img-responsive" style="width:100%;height:auto;" />
    </div>


//controller/instantiation code
 var myapp = angular.module("ActivitySelection", []);


            myapp.controller("ActivityController", function ($scope) {
$scope.shortdates = ["Thursday, January 28","Friday, January 29","Saturday, January 30"];
$scope.currentactivity = 1;
                $scope.activities =
                 [{
    "id":1,
    "title":"Activity1"},

{
    "id":2,
    "title":"Activity2"},
......
{
    "id":8,
    "title":"Activity8"}
];

thanks for the help. my next q is in a js object literal how do i pull back a url , for instance... "blurb": [ "<a href=\"google.com\" target=\"_blank\">Googlw<\/a>A comfortable drive ...] renders on the screen as : <a href="google.com" target="_blank">Googlw</a>A comfortable drive and it should be a link — Dave
– Dave, Commented Oct 23, 2015 at 14:11

raj · Accepted Answer · 2015-10-23 13:24:55Z

2

you can use $location service of angularJS for the same

myapp.controller("ActivityController", function ($scope,$location) {
  var myParam=$location.search().YOUR_SEARCH PARAM
  //use myParam however you want.

see $location angular docs for more info

edited Oct 23, 2015 at 13:24

answered Oct 23, 2015 at 4:03

raj

6941 gold badge5 silver badges23 bronze badges

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

12 Comments

Dave Over a year ago

I tried your idea i get the following error. 'code' TypeError: $location.query is not a function at new <anonymous> (activities_controller.js:6) at Object.invoke (angular.js:4473) at extend.instance (angular.js:9093) at nodeLinkFn (angular.js:8205) at compositeLinkFn (angular.js:7637) at compositeLinkFn (angular.js:7641) at publicLinkFn (angular.js:7512) at angular.js:1660 at Scope.$eval (angular.js:15878) at Scope.$apply (angular.js:15978) 'code'

Dave Over a year ago

'code' myapp.controller("ActivityController", function ($scope,$location) { $scope.shortdates = ["Thursday, January 28","Friday, January 29","Saturday, January 30"]; var myparam=$location.query().activity;

raj Over a year ago

Sorry .. My bad it should be $location.search() .. Updated the answer

Dave Over a year ago

let me try to implement

Dave Over a year ago

'$scope.activityparam=$location.search().activity; <h1>ActivityParam{{activityparam}}</h1> <div class="item item-bg-center-contain"> <div ng-repeat="items in activities | filter:{id : activityparam}:true"> <img ng-src="assets/images/activities/headers/{{items.id}}.jpg" class="img-responsive" style="width:100%;height:auto;" /> </div>' what did i do wrong?

|

Abhishek Shukla · Accepted Answer · 2015-10-23 05:12:33Z

0

I have just created a plunk for you. please go through this.

How to get query string parameters

This example is based upon ngRoute angular's default routing library. Let me know if you require ui-router example.

Note: In this example I have use $route to get the parameters. The reason is that the $routeParams are only updated after a route change completes successfully. This means that you cannot rely on $routeParams being correct in route resolve functions. Instead you can use $route.current.params to access the new route's parameters.

Hope this helps!.

answered Oct 23, 2015 at 5:12

Abhishek Shukla

6661 gold badge8 silver badges21 bronze badges

3 Comments

isherwood Over a year ago

Please post your answer here.

Dave Over a year ago

thank you for the idea abhishek but i wanted to use something more basic like the http property

Dave Over a year ago

i mean the $location object but i am having trouble retrieving it from on top

Collectives™ on Stack Overflow

How to retrieve value from query string with AngularJS

2 Answers 2

12 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related