一个input标签解决文件单选多选的问题

好久没写博客，最近项目优化，看见文件上传组件，发现之前用的是两个input标签，一个是多选，一个是单选，用过配置来控制显示或者隐藏

<div ng-click='!ctrl.fileUploader.isUploading && ctrl.reset($event)' class=" upload-text  text-center "
    ng-class="{'bg-disable':ctrl.fileUploader.isUploading}">
    <span ng-transclude></span>
    <input type="file" class='input-btn' uploader="ctrl.fileUploader" nv-file-select ng-show='!ctrl.isMultiple'
        ng-disabled="ctrl.fileUploader.isUploading"
        ng-class="{'input-disable':ctrl.fileUploader.isUploading}">
    <input type="file" class='input-btn' uploader="ctrl.fileUploader" nv-file-select ng-show="ctrl.isMultiple"
        multiple="multiple" ng-disabled="ctrl.fileUploader.isUploading"
        ng-class="{'input-disable':ctrl.fileUploader.isUploading}">
</div>

如果input标签里面 只要有multiple这个属性，不管你给的值是true或者false都是多选，没有这个属性就是单选，所以不能用multiple =‘false’或者multiple =‘true’控制，难道真的只能写2个标签？下面引入一个angular指令ng-prop

ng-prop指令

官方定义：该指令将表达式绑定到DOM元素属性,允许通过在属性中包含属性名称来写入任意属性,比如：将“my value”绑定到value属性上。

<input type="text" ng-prop-value="'my value'">

显示结果：

可以看出 input value属性值变成了“my value”！

如果我自己定义属性呢？

<input type="text" ng-prop-test="11111">

我们来打印一下这个dom元素的属性集合里面有没有test属性.

看打印结束是有这个属性的，然后我看下我没写multiple属性

默认值是false，那是不是我把这个multiple属性改成true就成多选了？然后改成这样

<input type="file"  ng-prop-multiple="true">

值确实变了，单选也变成多选了，那么我项目里面的html就可以改成如下

<div ng-click='!ctrl.fileUploader.isUploading && ctrl.reset($event)' class=" upload-text  text-center "
    ng-class="{'bg-disable':ctrl.fileUploader.isUploading}">
    <span ng-transclude></span>
    <input type="file" class='input-btn' uploader="ctrl.fileUploader" nv-file-select ng-prop-multiple="ctrl.isMultiple"
        ng-disabled="ctrl.fileUploader.isUploading" ng-class="{'input-disable':ctrl.fileUploader.isUploading}">
</div>

这样一个标签就可以搞定，ctrl.isMultiple这个值是产品配置的值，就可以通过这个值来判断需要单选或者多选！好了说到这里都已经说的差不多了，有不正的地方请指正！！欢乐的时光总是过得特别快,又到时候和大家讲拜拜！！