Question

我在模板上做了一些数学运算，有时结果是负数。我的问题是当结果为负数时，它会显示一个包含它的括号。我该如何解决？ 使用Angular 1.2。

我的控制员：

                    $scope.totalToReceive = totalToReceive;
                    $scope.discountedTotal = discount;
                    $scope.antecipatedTotal = antecipatedTotal;
                    $scope.totalReceived = totalToReceive - discount + antecipatedTotal;

我的模板：

<li>
    <span class="big-number"><span>R$</span> {{ totalReceived | currency: ""}}</span>
</li>

更新：我试着编写自己的过滤器，但它不起作用

.filter('numeric', function(){
return function (value) {
    if (value < 0) {
        value = '-' + Math.abs(value) + '';
    }
}
})

Answer 1

找到解决方案。非常简单。刚刚写了一个新过滤器：

.filter('customCurrency', ['$filter', function($filter){
return function (amount, currencySymbol) {
    var currency = $filter('currency');

    if(amount < 0) {
        return currency(amount, currencySymbol).replace("(", "-").replace(")", "");
    }
}
}])

模板：

<span class="big-number"><span>R$</span> {{ totalReceived | customCurrency: ""}}</span>

Answer 2

我遇到了同样的问题，下面是我如何解决我的问题。

我在我的 angular 服务中创建了一个方法（这允许我在任何需要的地方调用该函数）

formatNegativeVal(value: any){
  if(value.substring(0,1) === '-'){
    console.log('valusss ', value)
    return "(" + (value.replace(/-/g, '')) + ")"
  }else{
    return value;
  }
}

然后我只需在我需要使用上述方法的任何组件中创建另一个方法。

formatNegativeVal(value: any){
    return this.common.formatNegativeVal(value);
  }

最后我只调用最后一个 create 函数并在 HTML 页面中传递整个货币值。

<ng-container matColumnDef="credit_balance">
   <th mat-header-cell *matHeaderCellDef mat-sort-header> Balance Credit </th>
   <td mat-cell *matCellDef="let element"> 
      {{formatNegativeVal(element?.credit_balance  | currency : configs?.money_symbol 
      + ' ':'symbol':'1.0-0')}} 
   </td>
</ng-container>

角度显示负数的括号

2 个答案: