In file upload ng-change is not working as expected in angularJS
<input type="file" ng-model="fileUpload" ng-change="setFiles(this) /"
JS:
$scope.setFiles=function(element){
console.log(element.files);
}
Here element.files is undefined
But if i chage the ng-change to onchange it's working.
<input type="file" ng-model="fileUpload" onchange="angular.element(this).scope().setFiles(this)"/>
JS:
$scope.setFiles=function(element){
console.log(element.files);
}
Here i'm getting the element.files object.
Why it is working in onchange not in ng-change?
Angular doesn't seem to support binding for <input type="file"..../>. It seems like you have to create a directive... full details here. You can also try this library
<input type="file" id="file_upload_id_here" style="width:55%" name="file" onchange="angular.element(document.getElementById('file_upload_id_here')).scope().getFileDetailsCandidate(document.getElementById('file_upload_id_here'))" />
use like the above, some times the root scope is switchesm it cannot revert it current scope, on that this functionality will not works, so put your current document object like the above
Related
I have one html file that has a ng-model binding like this.
<input type="text" ng-model="ClassA.phoneNumber"/>
Can I use another js file to bind with the same element? Something like?
<input type="text" ng-model="ClassA.phoneNumber || ClassB.PhoneNumber"/>
The thing is I don't want to create another HTML file just for binding a simple element. The html file is being reused by multiple js files.
i don't know how your html looks like, but you could do it like this
<input type="text" ng-if="ClassA.phoneNumber" ng-model="ClassA.phoneNumber" />
<input type="text" ng-if="ClassB.phoneNumber" ng-model="ClassB.phoneNumber" />
angular will remove the dom element, if the condition is not met
I created a custom directive which is used to access the id of the form, to display messages if same validation failed.
directive Code
<div>
<md-input-container>
<label class="inputLabel" translate>amount</label>
<input ng-model="order.amount" name="amount" type="text" required
max="availableAmount"
ng-disabled="disabled" ng-currency flex/>
<ng-messages flex for="dataForm.amount.$error" ng-if="dataForm.amount.$dirty">
<ng-message when="max">max reached</ng-message>
</ng-messages>
</md-input-container>
</div>
usage:
<form id="dataForm">
<custom-directive></custom-directive>
</form>
It seems like I can not access the form. Or angularmessage can not handle the different scoping.
Has anyone the same problem or an idea?
Thank you
fyi.: I have found the following post, but I didn't think that i have the same problem as that guy.
angularjs ngMessages inside directive
I use Angular 1.4.8;message 1.4.8 and angular material 1.0.4
If directive have an isolated scope, than it will not be able to access the form controller object of the ng-form directive.
Angular enables multiple canonical forms, so you can simply wrap your input inside of your directive with a form / ng-form.
What is the "AngularJS way" of doing a form submit when any of its inputs have been clicked (or changed)?
<form ng-submit="submit($event)" id="myForm">
<input type="checkbox" name="foo" value="bar" ng-click="???"/>
</form>
I'm tempted to use jQuery and simply doing ng-click="$('#myForm').submit()", but it's probably worth learning it properly.
I have tried doing ng-click="submit($event)", but the error here is the $event object within the scope of the input instead of the entire form (correct me if I'm wrong, this is what I'm getting from the documentation).
Well, you can do something like this for sure by triggering the AngularJS submit event:
$scope.change = function($event) {
$timeout(function() {
angular.element($event.target.form).triggerHandler('submit');
});
};
where
<input type="checkbox" name="foo" value="bar" ng-click="change($event)" />
However I think it's better to simply use the same function in ngClick as used in ngSubmit.
Demo: http://plnkr.co/edit/tJIYD9ZVjYzwA2aXJobo?p=preview
ng-change is what worked for me using a text input:
<form>
<select data-ng-model="headerName" data-ng-options="header for header in headers"
data-ng-change="calculateCorrelations()"></select>
</form>
I am trying to check the name of the file before the user hits submit. Can I get the filename like we get the content of the input field?
Something like:
<input name="posterTitle" type="text" ng-model="posterTitle">
{{posterTitle}}
Similarly in:
<input name="posterFileName" ng-model="posterFileName" type="file" />
Using Angularjs you might need to use an onchange event to bind the input name inside controller. see the example :
<input name="posterFileName" type="file" onchange="angular.element(this).scope().fileName(this)"/>
Inside controller
$scope.fileName= function(element) {
$scope.$apply(function($scope) {
$scope.posterTitle= element.files[0].name;
});
};
Hope this will help.
a couple of links I've found that may help a bit:
http://api.jquery.com/file-selector/
jQuery: get the file name selected from <input type="file" />
for example, sing name or ID attribute:
$('input[type=file]').change(function(e){
$in=$(this);
$in.next().html($in.val());
});
My goal was to wrap angular-ui typeAhead directive into easily re-usable component, that could be used like this:
<input my-person-lookup="myModel.personId" ></input>
I've achieve this by writing my custom directive, and specifying static template for typeahead. Here is Plunker
Now, I would like to build this template dynamically, and then compile it:
var html = '<input type="text" ng-model="directiveModel.selectedPerson" typeahead=" p as p.name for p in people" typeahead-min-length="1" typeahead-wait-ms="200" typeahead-editable="false" placeholder="type p"></input>';
element.replaceWith($compile(html)(scope));
Unfortunately this approach didn't work Plunker.
Could anyone tell me what I'm doing wrong?
Just move your data to the wrapping controller and remove your isolated scope.
Plunker
Plunker2