2016-04-26 6 views
1

Ich habe versucht, eine benutzerdefinierte Direktive mit Optionen als Attribute übergeben .. Ich habe festgestellt, dass Währungsfilter nur mit Zahlen funktioniert und es funktioniert nicht, wenn es nur mit einer Zeichenfolge Eigenschaft verwendet wird. Und wenn ich versuche, diesen Filter mit Eigenschaft mit String zu verwenden, erzeugt er kein Ergebnis. Ist es so? und wie kann ich Währungsfilter mit String-Wert verwenden, wenn ich will?

var app = angular.module('myApp', []); 
 

 
app.controller('defaultCtrl', ['$scope', function($scope) { 
 
    $scope.products = [ 
 
    { 
 
     name: "Apples", 
 
     category: "Fruits", 
 
     price: 1.20, 
 
     expiry: 10 
 
    }, { 
 
     name: "Bananas", 
 
     category: "Fruits", 
 
     price: 2.42, 
 
     expiry: 7 
 
    }, { 
 
     name: "Pears", 
 
     category: "Fruits", 
 
     price: 2.02, 
 
     expiry: 6 
 
    } 
 
    ]; 
 
}]); 
 

 
app.directive('unorderedList', function() { 
 
    return function(scope, element, attrs) { 
 
    var data = scope[attrs["unorderedList"]]; 
 
    if(angular.isArray(data)) { 
 
     var listElem = angular.element('<ul>'); 
 
     var propertyExpression = attrs["listProperty"]; 
 

 
     element.append(listElem); 
 

 
     for(var i = 0; i < data.length; i++) { 
 
     listElem.append(angular.element('<li>').text(scope.$eval(propertyExpression, data[i]))); 
 
     } 
 
    } 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div id="wrapper" ng-controller="defaultCtrl"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h3>Products</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <div unordered-list="products" list-property="price | currency"></div> 
 
     <div unordered-list="products" list-property="name | currency"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+0

Was würden Sie erwarten, dass die Währung für Äpfel, Bananen oder Birnen zurückkehrt? Ich denke, es funktioniert richtig. Keiner der Werte für Name kann in Währung konvertiert werden. –

+0

es ist nur ein Testfall, ja, es macht keinen Sinn mit diesen Werten .. aber ich habe eine Frage im Allgemeinen .. Werte können sich ändern –

+0

Ja, ich verstehe, es ist nur ein Testfall, aber es ist ein Testfall, dass dupliziert das Problem nicht, nach dem du fragst. Jedenfalls habe ich einige der Artikel, die Sie geliefert haben, einfach kopiert und keine Leistungsprobleme festgestellt. Aber ... –

Antwort

0

Der Quellcode dieses Filters (currency) stehen als

currencyFilter.$inject = ['$locale']; 
function currencyFilter($locale) 
{ 
    var formats = $locale.NUMBER_FORMATS; 
    return function(amount, currencySymbol, fractionSize) 
    { 
     if (isUndefined(currencySymbol)) 
     { 
      currencySymbol = formats.CURRENCY_SYM; 
     } 

     if (isUndefined(fractionSize)) 
     { 
      fractionSize = formats.PATTERNS[1].maxFrac; 
     } 

     // if null or undefined pass it through 
     return (amount == null) 
      ? amount 
      : formatNumber(amount, formats.PATTERNS[1], formats.GROUP_SEP, formats.DECIMAL_SEP, fractionSize).replace(/\u00A4/g, currencySymbol); 
    }; 
} 

Jetzt ist der Code für formatNumber beginnt, folgen

function formatNumber(number, pattern, groupSep, decimalSep, fractionSize) { 

    if (!(isString(number) || isNumber(number)) || isNaN(number)) return ''; 

und angular.isNumber Zustand s

Bestimmt, ob eine Referenz eine Zahl ist.

Die "Spezial" Zahlen NaN enthält, + Unendlichkeit und -Infinity

So formatNumber(...) mit Äpfeln und Bananen einfach zurückgeben '' (leere Zeichenkette)

0

Da list-Eigenschaft ist nicht definiert im Umfang mit dem @ wird es nicht ausgewertet.

Also, wie Sie es sagen: JA Sie brauchen Scope. $ Eval.

auch immer Sie es ändern können:

list-property="{{price | currency}}" 

und den Umfang entfernen $ eval in Ihrer Richtlinie.. Das sollte funktionieren.

Verwandte Themen