Question

我有从数组中的对象构建的输入。

一切都正确但是当input.type = 'file'时，Angular将其更改为文本类型，我无法弄明白。

有没有注意到这个？

我的模板：

<span ng-repeat="input in formInputs">
    <label for="{{input.id}}">{{input.label}}</label>
    <input type="{{input.type}}" id="{{input.id}}" name="{{input.name}}" ng-model="input.insert" ng-required="input.must">
</span>

我的阵列：

var formInputs = [
    {
        label     : 'first name',
        id        : 'id1',
        type      : 'text',
        name      : 'name1',
        must      : true,
        insert    : ''
    },
    {
        label     : 'upload file',
        id        : 'id2',
        type      : 'file',
        name      : 'name2',
        must      : true,
        insert    : ''
    }
]

我的结果：

<span ng-repeat="input in formInputs">
  <label for="id1">first name</label>
  <input type="text" id="id1" name="name1" ng-model="input.insert" ng-required="input.must">
  <label for="id2">upload file</label>
  <input type="text" id="id2" name="name2" ng-model="input.insert" ng-required="input.must">
</span>

修改

我有这种流动：

<input type="{{childInput.type}}" id="{{childInput.id}}" name="{{childInput.name}}">

这个数组：

var formInputs = [
    {
        id        : 'id',
        type      : 'file',
        name      : 'name',
    }
]

坚决[仅限于Safari]：

<input type="text" id="id" name="name">

为什么会这样？

感谢您的帮助！

Answer 1

来自AngularJS Documentation for input：

注意：并非所有提供的功能都适用于所有输入类型。具体而言，ng-model不支持通过input[file]进行数据绑定和事件处理。

所以看起来Angular回归type="text"。有很多答案可以为此提供解决方案，请查看：

ng-model for <input type=“file”/>

从这个答案来看，这是一种处理文件输入的方法。

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

正如Hackerman所提到的，他的jsfiddle似乎很有效（使用Angular 1.0.1），但它似乎没有正确地填充模型。

Angular js将'file'类型更改为'text'类型[Safari]

1 个答案: