有條件地使用ng-repeat過濾器

我有一個對象，其中包含數值和文本的混合值。我想將numbers過濾器應用到對象的值，當它是一個數字（顯然）。但是當它不是一個數字時，我只需要把它吐出就可以了。原因是，將值| number應用於數值格式，但將字符串值留空（後來，它們不是數字）。有條件地使用ng-repeat過濾器

我猜它必須是一個自定義過濾器（我還沒有需要做）。在做ng-repeat時，是否有辦法在HTML中完成？

<table> 
     <tr ng-repeat="(metric, metricData) in data"> 
     <td>{{metric}}</td> 
     <td>{{metricData | number}}</td> 
     </tr> 
</table> 

$scope.data = { name:"this is the name", 
       score:48 
       outcome:"as expected", 
       attendance:820, 
       total:212.34 
       };

來源

2013-06-20 EnigmaRM

只要你知道，客戶的過濾器是不是做的好方法... – callmekatootie

我想它不是。我只是還沒有學會如何去做。也許是我學習的時間了。哈。 – EnigmaRM

下面是從@callmekatootie答案的使用ng-if（V1.1.5）所請求的替代版本：

<table> 
    <tr ng-repeat="(metric, metricData) in data"> 
     <td>{{metric}}</td> 
     <td ng-if="isNumber(metricData)">{{metricData | number}}</td> 
     <td ng-if="!isNumber(metricData)">{{metricData}}</td> 
    </tr> 
</table>

這具有僅運行在其上的數字元素的濾波器的優點。這在這種情況下可能沒有多大好處，但在其他更復雜的過濾器情況下可能會有用。要回答您關於內置angular.isNumber的其他問題，@callmekatootie確實在範圍函數isNumber中使用了該函數，該函數只是在視圖中使用內置函數的包裝。

Here is a fiddle

來源

2013-06-20 23:21:58 sh0ber

我想OP也想知道在構建的函數中是否可以直接在HTML中使用angular.isNumber（）代碼，我認爲這是不可能的。正確？ – callmekatootie

@callmekatootie我這麼認爲，表達式似乎只支持範圍上的變量。 – sh0ber

你可以試試這種方式 - 在你的控制器，你可以有識別功能，如果所提供的值是一個字符串或數字：

$scope.isNumber = function (value) { 
    return angular.isNumber(value); 
};

接下來，在你看來，你可能有以下幾種：

<table> 
    <tr ng-repeat="(metric, metricData) in data"> 
     <td>{{metric}}</td> 
     <td ng-show="isNumber(metricData)">{{metricData | number}}</td> 
     <td ng-hide="isNumber(metricData)">{{metricData}}</td> 
    </tr> 
</table>

因此，當metricData是一個數字，它被過濾並且當它是一個字符串，它是原樣輸出。

來源

2013-06-20 06:23:13 callmekatootie

+1一個變體可以使用ng-if（1.1.5+）版本，所以在關閉的情況下數據集根本不被過濾（這可以節省大數據集/複雜過濾器的時間）。 – sh0ber

我喜歡這個解決方案。沒有角度有一個內置的isNumber指令？ 'angular.isNumber'？我試圖用其他的東西，但不能讓它在HTML中工作。 – EnigmaRM

@ sh0ber使用'ng-if'的正確語法是什麼？我剛剛將我的角度版本升級到1.1.5。但是我沒有找到任何有關使用該指令的文檔。剛剛被告知「像使用ng-switch一樣使用它」...您是否願意使用nf-if提交解決方案？謝謝。 – EnigmaRM

我知道這是老了，但我認爲最好的辦法是將邏輯移動到一個過濾器。

app.filter("metricDataFilter", function($filter) { 
    return function(value) { 
     if(angular.isNumber(value)) { 
      return $filter("number", value); 
     } 

     return value; 
    } 
}

這樣的HTML更加簡潔，而且角度也不會重新繪製DOM元素

<table> 
    <tr ng-repeat="(metric, metricData) in data"> 
     <td>{{metric}}</td> 
     <td>{{metricData | metricDataFilter}}</td> 
    </tr> 
</table>

來源

2015-12-05 13:24:17

有條件地使用ng-repeat過濾器

回答

相關問題