html - ng-model 不适用于文件输入

标签 html angularjs input

<分区>

我正在尝试获取文件输入的值并将其显示在输入之外的其他地方。我在应用程序中使用 AngularJS v1.4.8。

<input type="file" ng-model="fileName" />
<div>{{fileName}}</div>

这种方法适用于 type="text"但不适用于 type="file"。

为什么会这样,我该如何解决这个问题?

谢谢!

最佳答案

由于我的任务非常简单,我决定采用另一种方式:

html:

 <input type="file" file-input="files" />
 <ul>
     <li ng-repeat="file in files">{{file.name}}</li>
 </ul>

js:

.directive('fileInput', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            element.bind('change', function () {
                $parse(attributes.fileInput)
                .assign(scope,element[0].files)
                scope.$apply()
            });
        }
    };
}]);

这实际上是来自this的解决方案教程。请注意,这也适用于多个文件。

尽管如此,Serghinho 的替代方案并没有什么不好,我认为只有一种更简单的方法。

关于html - ng-model 不适用于文件输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35036658/

相关文章:

html - INPUT 元素内的退格键导致固定位置 DIV 重新定位到光标

php - 如何获取动态添加的 html 按钮上的事件

javascript - ( Protractor )检查单击时是否禁用输入?

javascript - 使用函数更改全局变量

c - Scanf 检查整数的读取不起作用

javascript - AngularJS - 带有 Select 元素的表单从另一个对象获取 Id

html - 导航栏中的图标不保持内联

javascript - 根据文本更改背景

html - 使用::after 选择器为按钮设置动画

javascript - Kendo 多选下拉列表不显示值