複数のAngular ng-class式のIEサポート

Question

以下のコードサンプルでは、​​ファイルの拡張子を確認し、アップロードされたファイルのアイコンを設定しています。複数のファイルがサポートされているので、それぞれのアイコンを設定しており、拡張子に基づいて、関連するクラスを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

私は前にこのバグについては読んでいないが、あなたの代わりに、複数のを持つの適切なクラスを返す関数を作成することができ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

それは、マルチンの方法の他に、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>