ng-change on input with controller as syntax not working

Question

I am using $watch for triggering changes for input or select tags. Everything is working fine but want to refactor so instead of watchers to use ng-change directive. For select tags is working but for input type it is now working, function is not getting called.

Input view

<div>
    <input date-range-picker  type="text" ng-model="reviewvm.review.extDate" 
    ng-change="reviewvm.changed(reviewvm.review.extDate)" 
options="{locale:{format: 'MM/DD/YYYY'}, singleDatePicker:true}" />
    <span data-ng-click="reviewvm.openExitConfDatePicker()">
        <i class="icon-calendar"></i>
    </span>
</div>

Select view

<select ng-change="reviewvm.agencyChanged(reviewvm.agency)" 
data-ng-model="reviewvm.agency" data-ng-options="agency as agency.agencyName for agency in reviewvm.refAgencies track by agency.id"">
    <option value="">Select {{reviewvm.area}} Department or Agency</option>
</select>

Function

reviewvm.changed = changed;

function changed(current, original) {
    console.log(current + " - " + original);
}

function agencyChanged(current, original) { 
    console.log(current + " - " + original);
}

As I said same approach for select and input, but for input it does not go inside function changed....

Plunker

https://plnkr.co/edit/STyQT4SivGuAdzy5ADGl?p=preview

Update

<div data-ng-class="{'not-allowed input-group' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group' : reviewvm.userReviewAssoc}" data-ng-show="reviewvm.review.actualStartDt">
                        <input id="extConfDate" class="form-control date-picker" date-range-picker data-ng-disabled="!reviewvm.userReviewAssoc || !reviewvm.editMode" type="text"
                               ng-model="reviewvm.review.exitConfDt" ng-change="reviewvm.exitConfChanged(reviewvm.review.exitConfDt)"
                               min="reviewvm.review.actualStartDt" max="reviewvm.currDate" placeholder="mm/dd/yyyy" options="{locale:{format: 'MM/DD/YYYY'}, singleDatePicker:true}" />
                        <span data-ng-class="{'not-allowed input-group-addon' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group-addon' : reviewvm.userReviewAssoc}" data-ng-click="reviewvm.openExitConfDatePicker()">
                            <i class="icon-calendar"></i></span>
                    </div>


function exitConfChanged(current, original) {
            console.log(current)
        }

This is how I got to work for dropdown with current and original:

ng-change="reviewvm.reviewTypeChanged(reviewvm.review.reviewType, '{{reviewvm.review.reviewType}}')"

and then in controller:

function reviewTypeChanged(original, current) {
   if (original !== "") {
                original = angular.fromJson(original);
   }
console.log(original + " - " + current);
}

And this is working fine for all dropdown lists I am getting current and previous selected but for inputs not...

I think that maybe it is not going inside function cause of this error form angular-daterangepicker:

TypeError: Cannot read property 'startDate' of null
    at Array.<anonymous> (angular-daterangepicker.js:93)
    at Object.ngModelWatch (angular.js:23555)
    at Scope.$digest (angular.js:14404)
    at Scope.$apply (angular.js:14675)
    at done (angular.js:9725)
    at completeRequest (angular.js:9915)
    at XMLHttpRequest.requestLoaded (angular.js:9856)(anonymous function) @ angular.js:11706(anonymous function) @ angular.js:8619$digest @ angular.js:14430$apply @ angular.js:14675done @ angular.js:9725completeRequest @ angular.js:9915requestLoaded @ angular.js:9856

but don't know how to fix it cause I was searching on internet many people have same error and still no fix...

What is the code for the date-range-picker directive? Does it use isolated scope? If so that could be causing a problem. — georgeawg
– georgeawg, Commented Oct 21, 2016 at 16:10
@Bukic, check this plnkr plnkr.co/edit/hQlKSlso5kPHqsH27Ksf?p=preview — Vinay K
– Vinay K, Commented Oct 26, 2016 at 3:46
@VinayK I see that your plunker is working, I am getting value in console.log... However I tried same approach in my and it is not going to my function....I updated my question. — Micko
– Micko, Commented Oct 26, 2016 at 13:03

Pankaj Parkar · Accepted Answer · 2016-10-21 15:28:01Z

1

You shouldn't be using {{}} inside ng-change expression.

ng-change="reviewvm.agencyChanged(reviewvm.agency, (reviewvm.agencye || 'null'))"

Still wondering any special reason to have 'null' as a string?

answered Oct 21, 2016 at 15:28

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

4 Comments

Micko Over a year ago

Hey Pankaj, for some reason i thought that I need to send old value as second parametar in parentheses ( found this on stackoverlow) but after you comment I removed second parameter to function and i was still able to take current and original value. However for input type i still cannot succeed. I updated my code.

Pankaj Parkar Over a year ago

Bukic could you please create a plunkr?

Micko Over a year ago

I added plunker but for some reason I cannot run the plunker I get angular is not defined error.. I am not so familiar with plunker

Micko Over a year ago

If I use like you have without {{}} in agencyChanged function I will always have last selected value from dropdown for current and for original.

Collectives™ on Stack Overflow

ng-change on input with controller as syntax not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related