IE 支持多个 Angular ng-class 表达式

Question

我在下面有一个代码示例，我在其中检查文件扩展名并相应地设置上传文件的图标。由于支持多个文件，我为每个文件设置了图标，并根据扩展名应用了相关 class 和 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>

Answer 1

我以前没有读过这个错误，但你可以创建一个 returns 正确 class 的函数，而不是像这样具有多个 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';
}

Answer 2

我找到了一种方法，除了 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>

IE 支持多个 Angular ng-class 表达式

IE support for multiple Angular ng-class expressions

javascript

internet-explorer

angularjs

internet-explorer-11