Angular ngtable过滤器自定义属性



我有以下模型:

function Row(a,b) {
        this.a = a;
        this.b = b;
        this.sum = function () {
            return (a+b).toFixed(2);
        }
    }

一个行列表被绑定到一个ngTable,我想为sum属性创建一个过滤器。

<table ng-table="myTable" show-filter="true" class="table table-responsive table-striped table-condensed text-center">
    <tr ng-repeat="row in filteredRows">
      <td data-title="'a'" sortable="'a'" filter="{ 'a': 'text' }">
        {{row.a}}
      </td>
      <td data-title="'b'" sortable="'b'" filter="{ 'b': 'text' }">
        {{row.b}}
      </td>
      <td data-title="'sum'" sortable="'sum()'" filter="{ 'sum()': 'text' }">
        {{row.sum()}}
      </td>
    </tr>
  </table>

完整代码如下:https://embed.plnkr.co/VWUdn9an0kTUIFCkJWlj/

要达到预期效果,请使用下面的选项

HTML:

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="ng-table.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <table ng-table="myTable" show-filter="true" class="table table-responsive table-striped table-condensed text-center">
    <tr ng-repeat="row in filteredRows">
      <td data-title="'a'" sortable="'a'" filter="{ 'a': 'text' }">
        {{row.a}}
      </td>
      <td data-title="'b'" sortable="'b'" filter="{ 'b': 'text' }">
        {{row.b}}
      </td>
      <td data-title="'c'" sortable="'c'" filter="{'c':'text'}">
        {{row.c}}
      </td>
    </tr>
  </table>
</body>
</html>

app.js:

var app = angular.module('plunker', ['ngTable']);
app.controller('MainCtrl', function($scope,ngTableParams, $filter) {
  //model
  $scope.rows =[];
  var x =0;
  function Row(a, b) {
    this.a = a;
    this.b = b;
    this.sum = function() {
      return (a + b).toFixed(2);
    }

   $scope.rows[x]= new lineItem(a,b,(a + b).toFixed(2));
    x++;
  }
  function lineItem(a,b,c){
    this.a = a;
    this.b = b;
    this.c =c;
  }
  $scope.lines = [new Row(1, 2), new Row(2, 3),new Row(4,30)];
  console.log($scope.rows);
  $scope.myTable = new ngTableParams({
    count: $scope.rows
  }, {
    counts: [], // hides page sizes
    total: $scope.rows.length,
    getData: function($defer, params) {
      //console.log(params);
      $scope.filteredRows = params.sorting() ? $filter('orderBy')($scope.rows, params.orderBy()) : $scope.rows;
      $scope.filteredRows = params.filter() ? $filter('filter')($scope.rows, params.filter()) : $scope.rows;
      params.total($scope.filteredRows.length);
      $defer.resolve($scope.filteredRows);
    }
  });
});
http://codepen.io/nagasai/pen/XKwOaZ

最新更新