Question

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

完全像第一个例子： 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>

然而，这不起作用。确定按钮将永远保持禁用状态。我发现如果我将属性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，但无法找到满意的答案。它是做什么的，为什么表格必须按预期运作？

Answer 1

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

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

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

Answer 2

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

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)"

并且在更新表单

上的验证后将使用will更新范围:)

ngf-select做了什么以及为什么表单验证需要它？

2 个答案: