Question

我在视图中显示一些数据，但我需要先格式化，我正在做类似

的操作

val.toFixed(2)这没关系，但它有效，但问题是val有时带有字母，toFixed(2)没有考虑到这一点，所以不显示字母。< / p>

所以我需要一些考虑到字母和数字的东西，字母不必改变，只有像234235.345345435那样的数字，显然我需要这样的234235.34

以下是我正在使用的一些代码

<table>
    <tr>
        <th ng-repeat='header in headers'>{{header.th}}</th>
    </tr>
    <tr>
        <td ng-repeat='data in headers'>
          <div ng-repeat='inner in data.td'>
            <span ng-repeat='(prop, val) in inner'>{{val.toFixed(2)}}</span>
          </div>
        </td>
    </tr>
</table>

并在控制器中

$scope.LoadMyJson = function() {
      for (var s in myJson){
        $scope.data.push(s);
        if ($scope.headers.length < 1) 
            for (var prop in myJson[s]){
            prop.data = [];
            $scope.headers.push({th:prop, td: []});
          }
      }
      for (var s in $scope.data){
        for (var prop in $scope.headers){
            var header = $scope.headers[prop].th;
              var data = myJson[$scope.data[s]][header];                         
                 $scope.headers[prop].td.push(data);
                 console.log($scope.headers[prop].td);
        }
      }
};

我准备了this Fiddle

现在的方式是正确显示表格，但正如您所见，该表格缺少name，这是因为toFixed方法。

那么，我该怎么办？

Answer 1

创建要在模板上使用的自定义filter。

<table>
    <tr>
        <th ng-repeat='header in headers'>{{header.th}}</th>
    </tr>
    <tr>
        <td ng-repeat='data in headers'>
          <div ng-repeat='inner in data.td'>
            <span ng-repeat='(prop, val) in inner'>{{val|formatValue}}</span>
          </div>
        </td>
    </tr>
</table>


angular.module('whatever').filter('formatValue', function () {
  return function (value) {
    if (isNaN(parseFloat(value))) {
      return value;
    }

    return parseFloat(value).toFixed(2);
  } 
});

Answer 2

你可以试试这个：

这是一种使用angularjs作为MVC在视图中呈现格式化数据的简洁方法前端框架：

在角应用程序中创建过滤器。
在index.html中包含您的过滤器。
像这样使用你的过滤器：{{somedata | FILTERNAME}}

这是一个简单的角度过滤器来解决您的问题，希望它能帮助您：

angular.module('app')
.filter('formatHeader', function() {
    return function(data) {

        if(angular.isNumber(data)) {
            return data.toFixed(2);
        }

        return data;
    }
});

我们就这样：

<table>
<tr>
    <th ng-repeat='header in headers'>{{header.th}}</th>
</tr>
<tr>
    <td ng-repeat='data in headers'>
      <div ng-repeat='inner in data.td'>
        <span ng-repeat='(prop, val) in inner'>{{val | formatHeader}}</span>
      </div>
    </td>
</tr>

您可以查看以下参考资料：

在渲染之前格式化数据

2 个答案: