e-ng-change not working for bsdate element

[ianellis90]

Hi,

Please check out my plunker -> http://plnkr.co/edit/KzAwC1W0S7SZaG0wghl0

I've got a table form which contains a datepicker column. I want to utilize the e-ng-change method to do some work every time the date changes which works for basic text elements but not bsdate elements. I keep getting the below error when going to edit the table form:

VM1830 angular.min.js:116 Error: [$compile:ctreq] http://errors.angularjs.org/1.5.3/$compile/ctreq?p0=ngModel&p1=ngChange at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:6:416 at jb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:70:406) at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:65:259) at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:58:140) at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:58:157) at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:58:157) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:57:281 at EditableController.self.show (http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js:716:30) at http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js:1174:26

I've tried adding e-ng-model but still to no avail. Any guidance would be greatly appreciated.

[ckosloski]

I think the issue is because the ng-change doesn't actually get transferred to the input field and is still attached to the div. A ng-change isn't value on a div and that is why you are getting the error.

[ianellis90]

@ckosloski why does it work for the span above the date picker field then? If you type in the field before the datpicker field you can see the console logs from the e-ng-change method. That's what has me confused.

<span e-ng-change="onAccNumChange(mappedAccount, $data)" editable-text="mappedAccount.peaceAccNum" e-form="tableform"> {{ mappedAccount.peaceAccNum || '' }} </span>

Thanks for your help on this.

[ckosloski]

Because the ng-change does get transferred to the input text field.

The date picker is different because it's building up the html needed for the bootstrap directive and all e-* attributes are not automatically transferred to the tag that is rendered for the bootstrap directive.

A code change is required for the ng-change attribute to be added to the datepicker text field and have it removed from the surrounding div.

What specifically are you trying to do? Could the onbeforesave attribute on the form or element work?

[ianellis90]

I'm trying to figure out only the rows that one or more columns have been changed in therefore the onbeforesave won't work because it gives me all the rows before the save.

The reason being I don't want to save/update all of the table back to the DB just the elements which change cause the table could get large in the future.

Do you know of another way to only get the rows which some columns have being changed?

[ianellis90]

@ckosloski sorry for my negligence but I'm quite new to javascript/angularJS and I'm wondering how can I build this from source to generate the xeditable.js file and get the new change?

[ckosloski]

Try this:

• You have to have npm installed.
• Download the latest source.
• From the command line, go to the directory where you downloaded the source and run these commands.
• npm install -g grunt-cli
• npm install
• grunt build

I think that should build it for you.

[ianellis90]

@ckosloski sorry just seen that I didn't thank you.... Thanks very much for the help it worked a treat!!