Угловой фильтр JS-номера-изменение цвета при отрицательном значении

Я применяю числовой фильтр к результату функции:

<tr class="text-center">
    <th class="text-center">{{monthCategoryTotalPredict = getCategoryMonthTotal(costDirection, month, category, "predict")  | currency:currencySymbol}}</th>
    <th class="text-center">{{monthCategoryTotalActual  = getCategoryMonthTotal(costDirection, month, category, "actual")   | currency:currencySymbol}}</th>
    <th class="text-center">{{calculateSurplus(monthCategoryTotalPredict, monthCategoryTotalActual)  | currency:currencySymbol}}</th>
</tr>

отрицательные числа представлены следующим образом по умолчанию: (£230.00).

моя цель-заставить их также изменить цвет на красный. Как я могу это сделать в Angular JS? Это может быть частью фильтра? Могу ли я переопределить фильтр, чтобы немного изменить его поведение по умолчанию без полной перезаписи?

спасибо заранее!

9
angularjs javascript

5 ответов

чтобы изменить цвет текста в HTML, вам нужно будет изменить его элемент контейнера. Поскольку фильтр не знает об элементе, вы можете либо ввести его (плохая идея), либо использовать директиву вместо фильтра.

включение функции в ваш код на самом деле является плохим способом обработки вещей. Возможно, ему придется стрелять несколько раз и, безусловно, испортит любую сортировку, которую вы попытаетесь.

<th class="text-center" ng-class="{ red: calculateSurplus(monthCategoryTotalPredict, monthCategoryTotalActual) < 0 }">{{calculateSurplus(monthCategoryTotalPredict, monthCategoryTotalActual)  | currency:currencySymbol}}</th>

Я бы честно выполнил эти вычисления раньше время, чтобы все выглядело вот так.

<th class="text-center" ng-class="{ red: surplus < 0 }">{{surplus | currency:currencySymbol}}</th>
12

вы можете использовать ng-class для определения условных классов. Вы можете создать класс css, который представляет числа как красные и использовать его в атрибуте ng-class.

например:

<td ng-class="{'className': variable < 0}">{{variable}}</td>

подробная документация:http://docs.angularjs.org/api/ng.directive:ngClass

5

вы также можете использовать ng-style и добавить функцию к контроллеру.

например:

$scope.negativeValue=function(myValue){
  var num = parseInt(myValue);
  
  if(num < 0){
    var css = { 'color':'red' };
    return css;
  }
}
<td ng-style="negativeValue(myScopeValue)">{{ myScopeValue | currency }}</td>
4

попробовать 

 <th class="text-center" ng-class="{myRedClass: monthCategoryTotalPredict  <0}" >
      {{monthCategoryTotalPredict = ......}}</th>

затем добавьте правило класса css для изменения цвета

2

вот как это было сделано в моем приложении.

все вышеперечисленные решения будут пересчитывать значение, которое может быть неэффективным, если оно является результатом функции.

angular.module("myApp", [])
  .controller("myCtrl", myCtrl)
  .directive("colorUp", colorUp)

function myCtrl($scope) {
  $scope.num1 = 1
  $scope.num2 = -1
  $scope.num3 = 0
}

function colorUp() {
	return {
		restrict: "A",
		link: linkFunc
	}

	function linkFunc (scope, element, attributes) {
		//adding an event handler to see elements' value changes
		element.on("DOMSubtreeModified", onValChange)

		function onValChange () {
			var eleVal = deComma(element.text())
			var color  = (eleVal > 0) ? "green": (eleVal < 0) ? "red": ""
			element.attr("class", "ng-binding " + color)
		}
		
		function deComma(text) { 
		  return (text ? (text+"").replace(/,/g, "") : "")
		}
	}
}
<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="script.js"></script>
    <style>
    .red {color: red;}
    .green {color: green;}
     input { width : 50px;}
    </style>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <h3>Reusable Custom directive for coloring nums.</h3>
    <input type="number" ng-model="num1" placeholder="Enter first number here!!">
    <label color-up>{{num1 | number:2}}</label>
    <br>
    <input type="number" ng-model="num2" placeholder="Enter second number here!!">
    <label color-up>{{num2 | number:2}}</label>
    <br>
    <input type="number" ng-model="num3" placeholder="Enter second number here!!">
    <label color-up>{{num3 | number:2}}</label>
  </body>

</html>

вот ссылка plunker :- http://plnkr.co/edit/X42mE9LpagGRrasOckqQ?p=preview

надеюсь, что это помогает!!

0