我是AngularJS noob。我试图实现一个表单,它需要填写所有输入字段,包括文件上传输入。
完全像第一个例子:qazxsw poi
所以我创建了一个简单的表单来测试它:
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
在主控制器中,将当前范围赋予原型范围:
jsFiddle
之后只包含这个原型功能
MyCtrl.prototype.$scope = $scope;
现在你可以调用输入文件
MyCtrl.prototype.setFile = function(element) {
var $scope = this.$scope;
$scope.$apply(function() {
$scope.filename = element.files[0];
});
};
并且它将在更新表单上的验证后使用will更新范围:)
ngf-select是一个文件上载指令,用于定义选择文件时发生的情况。
您可以使用onchange="MyCtrl.prototype.setFile(this)"
将要执行的文件上传逻辑功能添加为ngf-select
,这样可确保用户从计算机中选择文件后自动上传文件,而无需单击上传按钮。
ngf-select="uploadFunction($file)"
基本上定义了从计算机中选择文件时会发生什么。