Warunkowo zastosuj filtry z powtórzeniem ng

Question

Mam obiekt zawierający mieszaninę liczb i tekstu dla wartości. Chciałbym zastosować filtr numbers do wartości obiektu, gdy jest to liczba (oczywiście). Ale kiedy nie jest to liczba, nie miałbym nic przeciwko temu, gdybym wypluł strunę. Tak jak jest, zastosowanie | number do wartości formatuje liczby, ale pozostawia wartości łańcuchowe puste (poza tym nie są liczbami).

Zgaduję, że musi to być niestandardowy filtr (który mam jeszcze do zrobienia). Czy istnieje sposób, aby zrobić to wyłącznie w HTML podczas wykonywania ng-repeat?

<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 
       }; 

Answer 1

Oto wniosek alternatywna wersja odpowiedzi z @callmekatootie użyciu 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> 

Ma to tę zaletę, że działa tylko filtr na elementach, które są numeryczne. Jest to prawdopodobnie mało korzystne w tym przypadku, ale może być przydatne w innych, bardziej złożonych sytuacjach filtrowania. Aby odpowiedzieć na inne pytanie dotyczące wbudowanego angular.isNumber, @callmekatootie korzysta z tego w funkcji zakresu isNumber, która jest tylko opakowaniem do korzystania z wbudowanego w widoku.

Here is a fiddle

Answer 2

Można go spróbować w ten sposób - w kontrolerze, można mieć funkcję, która identyfikuje jeśli Podana wartość jest ciągiem znaków lub numer:

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

Następnie w widoku mogłeś są następujące:

<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> 

tak więc, gdy metricData jest liczbą, odsącza się go, a jeżeli jest to łańcuch, jest wyprowadzany jako to.

Answer 3

wiem, że to jest stary, ale myślę, że najlepszym rozwiązaniem jest przeniesienie logiki do filtra.

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

     return value; 
    } 
} 

ten sposób HTML jest bardziej zwięzły i kanciasty nie będzie musiał przerysować elementów DOM

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