ng-change is not working initially on page loading but after refreshing page it works fine

Question

Here is the code I am facing problem with:

<input type="text" data-ng-model="TODATE" data-ng-change="setTdate()" name="date" class="form-control datepicker" id="todate"  data-date-container="#cal"  data-provide="datepicker" data-date-format="mm-dd-yyyy" placeholder="mm-dd-yyyy"   />

code in controller:

$scope.setTdate = setTdate;
    function setTdate() 
   { 
     alert("working"); 
   }

I am using input type as text for bootstrap datepicker, and wants to call a function on selecting a date. The ng-change event is not working when the page initially loads but as i refresh the page it works fine. There is no warning or error on debug.

I don't see any declaration for `ng-change` in your code, is it added dynamically? If so, can you add the code where it's done? If not, where do you expect the `ng-change` to be triggered? — Kaddath, Jul 03 '18 at 07:51
@prashantPimpale created this plunker please have look https://plnkr.co/edit/MZCciHSyfPVnfiQpzRDZ?p=preview — anupriya gupta, Jul 03 '18 at 10:19
Have a look at: https://stackoverflow.com/a/35178790/7124761 — Prashant Pimpale, Jul 03 '18 at 10:25
@prashantPimpale not working on changing the date.. it seems that selected date is not getting updated in $ scope, as if i change ng-change to ng-click it works fine when I click on textbox. — anupriya gupta, Jul 03 '18 at 10:46

Adesh Kumar · Accepted Answer · 2018-07-03T10:26:18.650

0

Have a look. I think it's working fine without refreshing the page.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
  <input type="date" ng-change="myFunc()" ng-model="myValue" />
  <p>ng-change triggered {{count}} times.</p>
</div>

<script>
  angular.module('myApp', [])
    .controller('myCtrl', ['$scope', function($scope) {
      $scope.count = 0;
      $scope.myFunc = function() {
        $scope.count++;
      };
    }]);
</script>
</body>
</html>

edited Jul 03 '18 at 10:26

answered Jul 03 '18 at 10:12

Adesh Kumar

952
2
16
33

thanks.. but i am trying to call ng-change on selecting a date from a ui-datepicker. – anupriya gupta Jul 03 '18 at 10:22
i have updated it for type=date you can check it and you should mention while asking – Adesh Kumar Jul 03 '18 at 10:26
the date type works fine but as it is a HTML5 control it does not work in IE hence the type is selected as "text" and bootstrap date picker is used. – anupriya gupta Jul 03 '18 at 10:39
i understand. First the function declaration is wrong $scope.abc=function(){ } not $scope.abc=function abc(){ } – Adesh Kumar Jul 03 '18 at 10:44
second after selecting a date value ng-change will work if you chnage the length of string in input field – Adesh Kumar Jul 03 '18 at 10:46
please try to change or delete last digit like 8 from 2018 and the function willl work – Adesh Kumar Jul 03 '18 at 10:46
and for better result you can use ng-focus also – Adesh Kumar Jul 03 '18 at 10:47
hope this helps @anupriya – Adesh Kumar Jul 03 '18 at 10:51
made the changes and it is working, but i want this on selecting a new date – anupriya gupta Jul 03 '18 at 10:54

ng-change is not working initially on page loading but after refreshing page it works fine

1 Answers1