IE支持多个Angular ng类表达式
IE support for multiple Angular ng-class expressions
下面有一个代码示例,我在其中检查文件扩展名,并相应地设置上传文件的图标。由于支持多个文件,我为每个文件设置了图标,并根据扩展名应用具有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>
我以前没有读过这个bug,但你可以创建一个返回正确类的函数,而不是像这样有多个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';
}
我找到了一种方法,除了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>
相关文章:
- ng init中的表达式无法使用ng repeat
- Angular,表达式{{}}的结果没有插入到ng-click中
- ng disabled在放入多个表达式时失败
- ng类应用于页面加载,表达式不真实
- 在 ng-include 中使用变量作为表达式
- AngularJS-在$event.stopPropagation之后停止ng-click表达式求值
- ng init与razor表达式
- 未为text/ng模板计算角度表达式
- AngularJS ng显示表达式在加载时不起作用
- 使用ng repeat中的键值来扩展作用域表达式
- IE支持多个Angular ng类表达式
- Angular js ng show没有'无法使用本机数学表达式
- ng-class 的函数表达式在 ng-click 时被调用
- 不适用于 Angular ng 禁用中的表达式
- 如何将 ng-click 与多个表达式一起使用
- 计算 ng-repeat Angular JS 表达式的总数
- AngularJS ng-pattern的正则表达式问题
- AngularJS ng-pattern 函数,带有正则表达式和年份输入字段的日期
- 简单的ng表达式不起作用
- Ng表达式不解析