CHUVASH.eu

CHunky Universe of Vigouros Astonishing SHarepoint :)

AngularJS: sync $location.search with an input value

I have used AngularJS for a while and to me this seems to be the best MVC javascript framework.

Today I wanted to implement a search which uses an input and a hash query string like in google. The input value and url have to be synced like:

index.html#?term=something

To do this we have to inject $location into our angular control. See the Angular Guide about $location. Then we have to observe both the $scope.term (which is bound to the input value) and $location.search().

<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
    </script>
    <script src="project.js"></script>
  </head>
  <body>
    <h2>Hash Search</h2>
    <div ng-controller="SearchCtrl">
        <input type="text" ng-model="term"/>
    </div>
  </body>
</html>

and javascript (project.js):

function SearchCtrl($scope, $location) {

	var termKey = "term";

	$scope.$watch(function () { return $location.search(); }, function() {
	  $scope.term = $location.search()[termKey] || "";
	});
	
	$scope.$watch('term', function(term) {
	   $location.search(termKey, term);
	});
	
}

In order to be able to listen to changes on $location.search, you have to provide an anonymous function in $watch. Thanks to Renan Tomal Fernandes’ answer on stackoverflow.

2 responses to “AngularJS: sync $location.search with an input value

  1. Nikita Tovstoles (@NikitaTovstoles) 2013-11-09 at 22:24

    how does the above not cause a circular loop (since two $watch invocations are ‘watching’ respective outputs)? thanks!

  2. Ohar 2016-02-17 at 09:47

    Not triggering at $location.search(NAME, VAL);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Discovering SharePoint

And having fun doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

.:paul.tavares:.

Me and My doings!

Share SharePoint Points!!

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode, ya mama

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

blksthl

Mostly what I know about SharePoint - CommunicoCuspis

%d bloggers like this: