Question

我目前正致力于使用HTML / AngularJS开发网格组件。列数据是动态呈现的。

我正在尝试格式化基于dataType显示的数据。数据类型可以是货币/日期/数字格式。从概念上讲，我试图实现如下所示。

有可能吗？

<td ng-repeat="row in rows" title="{{row.toolTip}}">
   {{row.displayData | row.dataType: row.format}}
</td>

Answer 1

使用AngularJS过滤器格式化数据

AngularJS提供了一些过滤器：currency，lowercase，uppercase（http://www.w3schools.com/angular/angular_filters.asp）或您可以定义自己的过滤器

示例：

var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
  $scope.data = [{
    name: "Item1",
    price: 50.3
  }, {
    name: "Item2",
    price: 15.55
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<style>
  table,
  th,
  td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
  }
  table tr:nth-child(odd) {
    background-color: #f1f1f1;
  }
  table tr:nth-child(even) {
    background-color: #ffffff;
  }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <table>
      <tr ng-repeat="x in data">
        <td>{{ x.name }}</td>
        <td>{{ x.price | currency }}</td>
      </tr>
    </table>

  </div>

在这里，我使用ng-style定义中的条件修改W3schools example以更改CSS样式

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<style>
  table,
  th,
  td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
  }
  table tr:nth-child(odd) {
    background-color: #f1f1f1;
  }
  table tr:nth-child(even) {
    background-color: #ffffff;
  }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="customersCtrl">

    <table>
      <tr ng-repeat="x in names" ng-style="{'background-color':(x.Country == 'UK')?'blue':'gray'}">
        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
      </tr>
    </table>

  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
      $http.get("http://www.w3schools.com/angular/customers.php")
        .success(function(response) {
          $scope.names = response.records;
        });
    });
  </script>

在Angularjs中动态格式化数据

1 个答案: