Question

我有以下对象：

 "file": "https://www.example.com/file.zip",

我这样设置：

$scope.building.file

并显示如下：

<input class="form-control" type="file" ng-model="building.file">

ng-model="{{building.file}}但这一部分并不起作用。如何在该输入文件标签中显示文件名？

Answer 1

你可以在那里创建一个指令来处理这些东西。

(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] });
         }
       });
     }
   };
 }
})();

Answer 2

这是错误：

<input class="form-control" type="file" ng-model="{{building.file}}">

应该是：

<input class="form-control" type="file" ng-model="building.file">

即使您没有添加ng-model，也会显示所选文件的名称。

如何在Angular.js中显示输入的文件名？

2 个答案: