我有一个代码示例,我检查文件扩展名,并相应地设置上传文件的图标。由于支持多个文件,我已为每个文件设置了图标,并根据扩展名我使用ng-class
属性应用相关的类。它不适用于IE11。我用单个表达式检查确认并且它有效。有解决方法吗?
<i flex ng-class="{
'icon-pdf': (fileDetails['extention'].search('pdf') != -1),
'icon-word': (fileDetails['extention'].search('doc') != -1),
'icon-ppt': (fileDetails['extention'].search('ppt') != -1),
'icon-xls': (fileDetails['extention'].search('xlsx') != -1),
'icon-html': (fileDetails['extention'].search('html') != -1),
'icon-jpg': (fileDetails['extention'].search('jpg') != -1),
'icon-jpg': (fileDetails['extention'].search('png') != -1),
'icon-wit': (fileDetails['extention'].search('txt') != -1)}"
>
</i>
答案 0 :(得分:1)
之前我还没有读过这个错误,但你可以创建一个返回正确类的函数,而不是像这样有多个ng-class
属性:
在你的模板中:
<i flex ng-class="getIconClass(fileDetails['extention'].search)"></i>
在你的控制器中:
function getIconClass(search) {
if(search('pdf') != -1)
return 'icon-pdf';
if(search('doc') != -1)
return 'icon-word';
if(search('ppt') != -1)
return 'icon-ppt';
if(search('xlsx') != -1)
return 'icon-xls';
if(search('html') != -1)
return 'icon-html';
if(search('jpg') != -1 || search('png') != -1)
return 'icon-jpg';
if(search('txt') != -1)
return 'icon-wit';
}
答案 1 :(得分:0)
我找到了一种方法,除了Martijn之外,使用ng-class
三元运算符(更干净)。发布它是为了扩展知识。
<i flex ng-class="
fileDetails['extention'].search('pdf') != -1? 'icon-pdf':
fileDetails['extention'].search('doc') != -1 ? 'icon-word':
fileDetails['extention'].search('ppt') != -1? 'icon-ppt':
fileDetails['extention'].search('xlsx') != -1? 'icon-xls':
fileDetails['extention'].search('html') != -1? 'icon-html':
fileDetails['extention'].search('jpg') != -1? 'icon-jpg':
fileDetails['extention'].search('png') != -1? 'icon-jpg':
fileDetails['extention'].search('txt') != -1? 'icon-wit': 'icon-html' "></i>