I have the following object:
"file": "https://www.example.com/file.zip",
Which I set like this:
$scope.building.file
and display like this:
<input class="form-control" type="file" ng-model="building.file">
ng-model="{{building.file}} this part, though, doesn't work. How can I display the name of the file in that input file tag?
you could create a directive handle this stuff there.
(function() {
'use strict';
angular
.module('testApp')
.directive('testFileUpload', testFileUpload);
function testFileUpload(){
return {
scope: true, //create a new scope and prototypically inherits from parent scope
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
//iterate files since 'multiple' may be specified on the element
for (var i = 0;i<files.length;i++) {
//emit event upward
scope.$emit("fileSelected", { file: files[i] });
}
});
}
};
}
})();
Here is the mistake:
<input class="form-control" type="file" ng-model="{{building.file}}">
It should be:
<input class="form-control" type="file" ng-model="building.file">
The name of the selected file shows even if you don't add ng-model.
