Question

我需要一个上传表单字段，可能允许或不允许用户选择多个文件。

我知道我可以这样做：

<input type="file" multiple ng-if="allow_multiple">
<input type="file" ng-if="!allow_multiple">

但是，我们知道这并不理想。

我试过

<input type="file" ng-multiple="allow_multiple">

但这不起作用。

似乎AngularJS has no such ngMultiple directive，但是everyone is using it anyway（或者我错过了什么？）

无论如何，实现这一目标的最佳方法是什么？

编辑：从目前为止的答案来看，似乎没有办法做到这一点。我在他们的追踪器上打开了这个问题，让我们看看我们得到了什么:-) https://github.com/angular/angular.js/issues/7714

Answer 1

最简单的方法是编写自己的ngMultiple指令。

HTML（相关）：

<label><input type="checkbox" ng-model="allowMultiple"> Allow multiple</label>
<hr>
<input
  type="file"
  class="hide"
  accept="image/*"
  ng-multiple="allowMultiple">

JS：

angular
    .module('app', [])
    .controller('appCtrl', function($scope) {
        $scope.allowMultiple = false;
    })
    .directive('ngMultiple', function () {
        return {
            restrict: 'A',
            scope: {
                ngMultiple: '='
            },
            link: function (scope, element) {
                var unwatch = scope.$watch('ngMultiple', function (newValue) {
                    if(newValue) {
                        element.attr('multiple', 'multiple');
                    } else {
                        element.removeAttr('multiple');
                    }
                });
            }
        };
    });

Plunker

Answer 2

我在Angular 2

中遇到同样的问题

最后修复如下：

<input type="file" 
    [accept]="extAccepts" 
    [multiple]="(maxFiles > 1)" />

注意：文件类型（extAccepts）和maxFiles都是从用户读取组件为@input（）。

希望它对某人有所帮助！

Answer 3

尝试使用ng-attr -

 ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

如果使用ng-attr-为任何属性添加前缀，则编译器将剥离前缀，并将该值的值与原始属性值中的角度表达式的结果相加。

Answer 4

除了这样做的困难之外，还有一些浏览器不会评估multiple="false"（文件输入中的Safari 8为ex）的问题。因此需要有条件地写入多属性。

我会将html包装在一个指令中，并有条件地在指令中应用该属性，例如：

var input = elem.find('input');
if(condition)
  input.attr('multiple', 'true');

条件可以是任何指令属性。

Answer 5

我在移动电话，对不起，简短的回答。

我会隐藏两个不同的文件输入，一个具有multiple属性，另一个没有。您可以使用ng-if指令来实现这一目标。

编辑：我很抱歉，好像你不想这样做，即使它完全有效。你可以为它编写自己的指令，但它非常简单。

Answer 6

您可以使用ngSwitch指令。请查看AngularJs文档以获取更多详细信息。

https://docs.angularjs.org/api/ng/directive/ngSwitch

在这个演示示例中，指令在使用ngSwitch指令为指令传递的范围参数中使用和不使用多个输入文件之间切换。

Demo using ngSwitch

Answer 7

另一个想法是使用ngShow / ngHide。在这个演示示例中，输入文件是基于param的show / hide，并且有一个get输入值的指令，并在$ scope param中设置。

Demo using ngShow + directive

Answer 8

解决方案非常简单，因为您正在使用指令或组件-只需在适当的时候操作DOM。在这里浏览一下：

app.component('myComponent', {
    templateUrl: 'tmpl.html',
    bindings: {
        str: '@'
    },
    controller: function ($element) {
        this.$postLink = function () {
            $element.find('input').attr('multiple', 'multiple');
        }
    }
}

有条件的＆＃34;多个＆＃34;使用AngularJS在<input type =“file”/>中的属性

8 个答案: