How to pass value of ng-repeat variable into input["file"]'s onchange function?

Question

Inside of an ng-repeat="item in vm.items I have the following input["file"]:

<input type="file" 
       ng-attr-id="image{{item}}"
       class="form-control"
       accept="image/*"
       onchange="angular.element(this).scope().vm.openFile(event, item)"
       required>

I am calling vm.openFile using onchange instead of ng-change because ng-change is not supported for input["file"] types.

The problem, now, is that I am unable to pass item to my onchange function because of the following error:

Uncaught ReferenceError: item is not defined

How can I pass the value of item, which is just a string, into my onchange function within ng-repeat?

It would be nicer to define `ng-model` for your inputs so you can keep everything within angular without needing to use `onchange`. — David Williams, Feb 04 '15 at 02:30
It would be nicer, however, ng-model is not supported for `input["file"]`. Perhaps there is another way? — Raphael Rafatpanah, Feb 04 '15 at 02:32
Ah sorry, didn't see that. It seems a bit hacky, but what if you changed `item` in your `onchange` to `{{ item }}`? — David Williams, Feb 04 '15 at 02:35
In that case, the best I can do for you is give you a link to this answer: http://stackoverflow.com/questions/17063000/ng-model-for-input-type-file which you may have already seen. — David Williams, Feb 04 '15 at 02:38

score 7 · Accepted Answer · answered Feb 04 '15 at 03:14

Since onchange is a build-in function, it is not compiled by angular but simply execute global-scope javascript. So, since there is no item variable in your global scope (which is fine), it crashes.

For the same reason as you could not simply write vm, but had to write angular.element(this).scope().vm, you will need to use the same for the item variable. Hence the html:

onchange="angular.element(this).scope().vm.openFile(event, angular.element(this).scope().item)"

Note that I don'tknow where this event variable comes from, so you may need to do the same for it if it is an angular thing.

Now this is a hack agisnt Angular design principles, so it would be better to use a directive as pointed out by David Williams comment.

I was hitting my head to find this answer Thank you. – Saurabh Sarathe Nov 23 '16 at 00:42 — Saurabh Sarathe, Nov 23 '16 at 00:42

How to pass value of ng-repeat variable into input["file"]'s onchange function?

1 Answers1