How to track the dynamic change in input field value using angularjs

Question

I have an input field which is changing dynamically on some event.

<input name="selectedId" id="selectedId" ng-model="selectedId" type="hidden" on-change="setUrl">

Now I want to redirect the page to that id present in input field when ever it changes.

My controller:

var app = angular.module("myApp", []).
  config(function($routeProvider, $locationProvider) {
    $routeProvider.
      when("/a1", { templateUrl: "partials/page1.html"}).
      when("/a2", { templateUrl: "partials/page2.html"}).
      otherwise( { redirectTo: "/a1" });
  });
app.controller("MainCtrl", function($scope, $location) {  
  $scope.setUrl=function($scope){
    if ($scope.selectedId) {
      alert($scope.selectedId);
    }
    else{
     alert("Out of scope"); 
    }
    //$location.path($scope.selectedId);
  };

Here, I am not able to put the input field value in to scope. I'm not even able to trigger setUrl() so that I can redirect the URL.

I'm new to AngularJS so I need to understand the concept.

Its Working for keypress event, But not for the dynamic values through javascript. — Sumant
– Sumant, Commented Jun 18, 2013 at 12:53

Stewie · Accepted Answer · 2013-08-19 08:36:04Z

3

You are using on-change. AngularJS has a ngChange directive. Use it.
Once you use ngChange also replace setUrl with setUrl().
Then, remove the $scope param from setUrl function signature. $scope is defined inside the MainCtrl so it's implicitly available to all functions defined in it. You don't ned to pass it in.
You are using hidden input to receive the new id from somewhere, only to pass it on to setUrlfunction. You don't need that hidden input. Consider using AngularJS shared services, or event broadcasting, or use $scope.$watch.

edited Aug 19, 2013 at 8:36

answered Jun 18, 2013 at 10:05

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

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

Comments

Ajay Singh Beniwal · Accepted Answer · 2013-06-18 10:04:07Z

1

One possible to your work around is

Register a watch on input model and change location inside that watch function

app.controller("MainCtrl", function($scope, $location) {  
 $scope.$watch('selectedId',function(newvalue,oldvalue){
  $location.path(newvalue);
 }
  };

<input name="selectedId" id="selectedId" ng-model="selectedId" type="hidden" >

answered Jun 18, 2013 at 10:04

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

1 Comment

Sumant Over a year ago

I tried it but its not working. any link. on change its not calling controller function.

Collectives™ on Stack Overflow

How to track the dynamic change in input field value using angularjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related