4

我是 AngularJS 菜鸟。我试图实现一个表单，该表单需要填写所有输入字段，包括文件上传输入。

和第一个 ecample 完全一样： https ://angular-file-upload.appspot.com/

所以我创建了一个简单的表格来测试一下：

<form name="myForm">
        <input id="userUpload" ng-model="filename" name="userUpload" required type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
        <input id="userName" ng-model="username" name="name" required type="text" />
        <button ng-disabled="myForm.$invalid" class="btn btn-primary">Ok</button>
    </form>

但是，这不起作用。OK 按钮将永远保持禁用状态。我发现如果我将属性添加ngf-select=""到文件输入字段：

<input id="userUpload" ng-model="filename" name="userUpload" required ngf-select="" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

然后表单按预期工作。userName当两个和userUpload输入字段都填满时，确定按钮变为启用状态。我尝试谷歌搜索ngf-select，但找不到满意的答案。它有什么作用，为什么表单必须按预期运行？

4

2 回答 2

13

ngf-select 是一个文件上传指令，它定义了当你选择文件时会发生什么。

您可以添加要执行的文件上传逻辑功能，ngf-select这样ngf-select="uploadFunction($file)"可以确保文件在用户从计算机中选择后自动上传，而无需单击上传按钮。

ngf-select基本上定义了当您从计算机中选择文件时会发生什么。

于 2017-05-18T10:45:58.787 回答
3

角度输入文件存在问题，请参阅下一个小提琴它将对您有所帮助。

jsFiddle

在主控制器中放这个，以将当前范围提供给您的原型范围：

MyCtrl.prototype.$scope = $scope;

在包含这个原型函数之后

MyCtrl.prototype.setFile = function(element) {
var $scope = this.$scope;
$scope.$apply(function() {
    $scope.filename = element.files[0];
});
};

现在在输入文件上你可以调用

onchange="MyCtrl.prototype.setFile(this)"

它将更新范围:) 更新表单上的验证后

于 2015-11-25T09:39:08.237 回答