JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="carBanking">
    <div ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="item in items">{{item.text}} : <span cb-currency="item.amount"></span>
                
            </li>
        </ul>
    </div>
</div>

CSS

.positive {
    color:green;
}
.negative {
    color:red;
}
}

JavaScript

angular.module('carBanking', ['carBanking.directives']);
//建立一個名稱為carBanking的ng-app
//建立一個名稱叫做cbCurrency的directive
angular.module('carBanking.directives', [])
    .directive("cbCurrency", function () {
    return {
        restrict: "A",
        scope:{
            cbCurrency: "="
        },
        template: "<span ng-class='{positive : (cbCurrency >0), negative: (cbCurrency< 0) }'>{{cbCurrency}}</span>",
        replace: true
    };
});

function MyCtrl($scope) {
    $scope.items = [{
        text: "上次點數",
        amount: 20
    }, {
        text: "目前點數",
        amount: -100
    }];
}