ng-focus is not working for input text in angularjs?

Question

I want to use ng-focus for input text, It is not working but it gives old value, First time. I want to use the date field value in controller to create dynamic URL, It will fetch the JSON data corresponding date, So here I am creating dynamic URL corresponding that date, So I need date in controller.

One more thing, I following demo I am using directive, fromdatepicker and todatepicker, is there any other approach ?

Pluker DEMO http://plnkr.co/edit/1KRNBUXyK5O6LNwDS06x?p=preview

HTML

<input ng-model="from_date" ng-focus="changeFromDate()" type="text"/>

Angularjs

app.controller('myCtrl', function($scope) {
     $scope.item = ""
    $scope.changeFromDate = function() {
        $scope.$apply();
        alert($scope.item);
    }
});

Wawy · Accepted Answer · 2015-08-01 14:57:34Z

2

I'm guessing this is what you are trying to achieve:

<!doctype html> 
<html lang="en">
<head>
  <meta charset="utf-8" />  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>  
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
  <script>

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

    app.directive('datepicker', function() {
       return {
         link: function(scope, element, attrs, ctrl) {
           element.datepicker({
               inline: true,
               dateFormat: 'dd.mm.yy',
               onSelect: function(dateText) {
                   ctrl.$setViewValue(dateText);
               }
           });
         },
         require: 'ngModel'
       }
    });

    app.controller('myCtrl', function($scope) {
        $scope.todate = "";
        $scope.fromdate = "";
        $scope.changeDate = function(date) {
            alert(date);
        }
    });
  
  </script>
</head>
<body ng-app="myApp">
 <div ng-controller="myCtrl">

<p>From Date : <input type="text" datepicker ng-model="fromdate"  ng-change="changeDate(fromdate)"/></p>
 
<p> To Date: <input type="text" datepicker ng-model="todate"  ng-change="changeDate(todate)"/></p>
 
 <br />

 </div>
</body>
</html>

http://plnkr.co/edit/D5sT4WEufLwoMHYxngmA?p=preview

Basically ngChange will trigger every time your text input changes ($setViewValue is called).

For more info, have a look at ngModelController and ngChange

answered Aug 1, 2015 at 14:57

Wawy

6,2692 gold badges26 silver badges24 bronze badges

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

2 Comments

geeks Over a year ago

Thanks for providing the solution, but how to get the value of ` $scope.todate = ""; $scope.fromdate = "";` How we will now that ` $scope.changeDate = function(date) { alert(date); }` for corresponing date, please see your link

Wawy Over a year ago

I don't understand what you mean

panzhuli · Accepted Answer · 2015-08-01 14:36:10Z

You should try using $broadcast to send the details from your directive to your controller. See this plunkr: http://plnkr.co/edit/HTPJn57VPbmPUy0rnzms

here's the relevant code to help:

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

app.directive('fromdatepicker', function() {
   return function(scope, element, attrs) {
       element.datepicker({
           inline: true,
           dateFormat: 'dd.mm.yy',
           onSelect: function(dateText) {
               var modelPath = $(this).attr('ng-model');
               putObject(modelPath, scope, dateText);
               scope.$apply();
               scope.$broadcast('dateSelected', {'date': dateText} );
           }
       });
   }
});
app.controller('myCtrl', function($scope) {
    $scope.item = ""
    $scope.$on('dateSelected', function(event, args) {
        alert(args.date);
    });
});

Collectives™ on Stack Overflow

ng-focus is not working for input text in angularjs?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related