Angular 1.5 - Benutzerdefinierte Richtlinie zeigen Geld Farbe

Question

Ich bin eine Richtlinie in Angular 1.5.x Schaffung die $ Money Menge in rot oder grün zu schreiben, je nachdem, ob es ein Verlust oder Gewinn.

<div financial-Color amount="model.Money"></div> 

Meine benutzerdefinierte Richtlinie sieht wie folgt aus so weit, wie ich den $ Money Betrag in Währung mit der Farbe ausschreiben?

app.directive('financialColor', function() { 
    return { 
     restrict: 'EA', 
     scope: { 
      'amount': '=' 
     }, 

     link: function (scope, element, attrs) { 
      scope.$watch('amount', function (condition) { 
       if (attrs.amount<0) { 
        element.css('color', 'red'); 
       } 
       if (attrs.amount > 0) { 
        element.css('color', 'green'); 
       }; 
      }); 
     } 
    } 

Answer 1

Mit $watch können Sie die newValue Parameter in der Callback-Funktion überprüfen.

auf den gewünschten Wert, verwenden Sie die currency Filter erhalten die Menge in das Format, das Sie benötigen.

Um den Wert festzulegen, können Sie AngularJS jqLite html-Methode auf die element verwenden, um den Wert festzulegen.

Heresa Arbeitsbeispiel (die Menge Wertänderungen nach 5 Sekunden, um den negativen Betrag zu demonstrieren):

// app.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app', []); 
 

 
})(); 
 

 
// main.controller.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app').controller('MainController', MainController); 
 

 
    MainController.$inject = ['$timeout']; 
 

 
    function MainController($timeout) { 
 

 
    var vm = this; 
 

 
    vm.amount = 100.05; 
 

 
    $timeout(function() { 
 

 
     vm.amount = -55.10; 
 

 
    }, 5000); 
 

 
    } 
 

 
})(); 
 

 
// financial-color.filter.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app').directive('financialColor', financialColor); 
 

 
    financialColor.$inject = ['$filter']; 
 

 
    function financialColor($filter) { 
 

 
    return { 
 
     restrict: 'EA', 
 
     scope: { 
 
     'amount': '=' 
 
     }, 
 
     link: function(scope, element, attrs) { 
 

 
     scope.$watch('amount', function(newValue, oldValue) { 
 

 
      // set the value using the currency filter 
 
      element.html($filter('currency')(newValue, '$', 2)); 
 

 
      if (newValue < 0) { 
 

 
      element.css('color', 'red'); 
 

 
      } else if (newValue > 0) { 
 

 
      element.css('color', 'green'); 
 

 
      } 
 

 
     }); 
 
     } 
 
    } 
 
    } 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="MainController as MainCtrl"> 
 

 
    <div financial-color amount="MainCtrl.amount"></div> 
 

 
</div>

Answer 2

Implementation unter Verwendung ng-Klasse

Richtlinie:

app.directive('financialColor', function() { 
    return { 
     restrict: 'EA', 
     scope: { 
      'amount': '=' 
     }, 
     template: "<span ng-class=\"{'red':amount<0, 'green': amount>0}\">${{amount}}</span>" 
    } 
}); 

CSS

.red {color: red} 
.green {color: green}