一個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這個值是產品配置的值，就可以通過這個值來判斷需要單選或者多選！好了說到這裏都已經說的差不多了，有不正的地方請指正！！歡樂的時光總是過得特別快,又到時候和大家講拜拜！！