Issues with Binding ng-model with calculated field in the html DOM

Question

Form elements

<input  ng-model="student.person.firstName" type="text"/>
    <textarea ng-model="student.person.photo" id="imageText" >
    </textarea>
<input type="file" ng-model="" id="imageUpload" onchange="getbase64();"/>

base64() method sets the text for <textarea>. Now JS code

$scope.saveInfo = function(){    
    console.log($scope.student.person.firstName);
    console.log($scope.student.person.photo);
};

I don't get anything in person.photo whereas person.firstName gets me the value of the name. Is there a binding problem because i'm setting the value of the <textarea> using js with base64 content

http://plnkr.co/edit/cElm8PD3hNzEWBNesegW?p=catalogue plunker link.

where you call `$scope.saveInfo`? can you provide also `getbase64()`? — Grundy, May 13 '15 at 11:07
http://plnkr.co/edit/cElm8PD3hNzEWBNesegW?p=catalogue yes the getbase64() method does get called. And also I can see the base64 converted string in the text area. — Pavan, May 13 '15 at 11:28
@Pavan, are you know that you mix angular code and none angular? — Grundy, May 13 '15 at 11:36
possible duplicate of [ng-model for ](http://stackoverflow.com/questions/17063000/ng-model-for-input-type-file) — Grundy, May 13 '15 at 11:41

score 0 · Answer 1 · edited May 13 '15 at 11:52

0

You need to manually trigger the change event (inside fileReader.onload ), something like:

 var element = document.getElementById('imageText');
 if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
 } else
    element.fireEvent("onchange");

working plunker: http://plnkr.co/edit/QGCl6ly5HMmAoDwyt4YO?

edited May 13 '15 at 11:52

Grundy

13,356
3
35
55

answered May 13 '15 at 11:44

ABOS

3,723
3
17
23

here element is something we want to have change event fired for?? – Pavan May 13 '15 at 11:58
Can you please explain a little why it did not work my way. And what did your code do? – Pavan May 13 '15 at 12:02
@Pavan this _ABOS_ answer :-) anyway your way not work because angular don't know that something change – Grundy May 13 '15 at 12:08

Issues with Binding ng-model with calculated field in the html DOM

1 Answers1