AngularJs：如何在ngRepeat内添加自定义过滤器来操作小数？

Question

我有多个属性名称和值的单个对象，这些对象将通过ng-repeat打印出来。 这个大对象中的两个对象称为currencyName和currencyPrice。

默认情况下，这些对象在后端有8个十进制的硬编码，我的任务是操纵某些currencyName以显示5个十进制，或者在Angular显示页面中显示8个十进制。 默认情况下，currencyPrices的后端有8个小数位硬编码，无法触摸，因为那部分代码已在其他地方重用。 对于我正在处理的显示页面，我们使用过滤器| 数量：默认为2。

我试图创建一个自定义过滤器，该过滤器将主要对象的数组作为目标，运行for循环/ forEach方法，将currencyName对象作为目标，如果它与包含要操作的currencyNames的数组匹配，则角度显示页面将显示5小数点（在这种情况下）。

这对我来说非常困难。 我没有完整的代码将其粘贴到此处，但是这里有一些示例代码来显示代码的外观。

<tr ng-repeat="full in fulls.mainList" class="animate-repeat">
  <td>{{full.currencyName}}</td>
  <td>{{full.tradedAverage | number:2}}</td>
  <td>{{full.tradedAmount | number:2}}</td>
  <td>{{full.currencyPrice | number:2}}</td>
</tr>

在这种情况下，fulls是控制器内部正在解析的大对象。

Answer 1

测试了您的代码，它应该可以工作：

   <div ng-repeat="full in fulls.mainList">
       <span>{{full.currencyName}}</span>
       <span>{{full.tradedAverage | number:2}}</span>
       <span>{{full.tradedAmount | number:2}}</span>
       <span>{{full.currencyPrice | number:2}}</span>
   </div>

    $scope.fulls = {
          mainList : [
            {
              currencyName: 'TEST',
              tradedAverage: '12.123434',
              tradedAmount: '13.133434',
              currencyPrice: '14.143434'
            }
          ]
       };

http://jsfiddle.net/Lvc0u55v/1/

也许您有'，'而不是'。 在你的号码？

Answer 2

注意，在控制器中编写自己的函数非常简单，该函数封装了小数位数的逻辑。

<tr ng-repeat="full in fulls.mainList" class="animate-repeat">
  <td>{{full.currencyName}}</td>
  <td>{{full.tradedAverage | number: (fnThatTellsTheNumberOfDecimals(full, 'tradedAverage')}}</td>
  <td>{{full.tradedAmount | number:(fnThatTellsTheNumberOfDecimals(full, 'tradedAmount')}}</td>
  <td>{{full.currencyPrice | number:(fnThatTellsTheNumberOfDecimals(full, 'currencyPrice')}}</td>
</tr>

然后在您的控制器中，编写如下内容：

$scope.fnThatTellsTheNumberOfDecimals = function(element, attr){
    if (attr === 'example' && element.type === 'some'){ return 2; }
    return 6;
};