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

Question

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

默认情况下，这些对象在后端硬编码了 8 个小数，我的任务是使用 Angular 在显示页面中操作某些 currencyName 以显示 5 个小数或 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;
};