在Angular JS中用括​​号过滤数字

时间:2015-03-01 11:48:40

标签: angularjs datatables angularjs-filter

我有像这样的json数据

[{name:" abc",count:"(10)",{name:" xyz",count:"(20 )"},{name:" pqr",count:20}]

我使用Angular datatables绑定此数据,现在我想对count

进行排序

列以下列方式

更新

下降时应该是

计数

(20)

20

(10)

在升序中它应该是

计数

(10)

20

(20)

我尝试使用我的表上定义的自定义过滤器实现相同的目的

$scope.countFilter = function(item){                    
         return parseInt(item.count.replace('(', item));        
    };

但它似乎没有给我想要的结果。

我的表格如下

<table>
 <thead>
  <tr>
   <th>Name</th>
    <th>Count </th>
 </tr>
</thead>
<tbody>
 <tr ng-repeat="item in items |orderBy:'countFilter'">
   <td>{{item.name}} </td>
    <td>{{item.count}} </td>
</tr>
</tbody>
<table>

2 个答案:

答案 0 :(得分:2)

您应该创建一个自定义过滤器来对它们进行排序,而不是传递谓词函数(它将根据返回值简单地包含或排除数组中的项。

这样的东西会起作用..它使用array.prototype.sort和自定义排序函数。

angular.module('myApp', [])

.filter( 'bracketSort', function() {
  return function ( inputArray ) {
    // Look for brackets
    var bracketRegex = /\(([0-9]+)\)/;
    return inputArray.sort( function (a, b) {
      var aBrackets = bracketRegex.exec(a);
      var bBrackets = bracketRegex.exec(b);
      // brackets mean a higher value
      if(aBrackets && !bBrackets) 
        return 1;
      else if (bBrackets && !aBrackets) 
        return -1;
      else if (aBrackets)
        return aBrackets[1] - bBrackets[1];
      else
        return a - b;
    });
  };
});

你可以像这样使用它:

<tr ng-repeat="item in items | bracketSort">

答案 1 :(得分:1)

我有一个有效的解决方案:

喜欢@Ed Hinchliffe的解决方案 -

<tr ng-repeat="item in items | bracketSort:<true or false>">

和过滤器 -

.filter('bracketSort', function() {
  return function ( inputArray, descending ) {

    return inputArray.sort( function (a, b) {     
      //replace pattern "(number)" with "-number"
      aVal = a.count.toString().replace(/\((\d+)\)/, "-$1");
      bVal = b.count.toString().replace(/\((\d+)\)/, "-$1");
      return descending ? bVal- aVal : aVal - bVal;
    });
 };
})

<强>更新

现在我已经更好地理解了这个问题,here是一个适用于datatables的解决方案。

jQuery.fn.dataTableExt.oSort['brackets_nums-asc'] = function (x, y) {
  xVal = x.toString().replace(/\((\d+)\)/, "-$1");
  yVal = y.toString().replace(/\((\d+)\)/, "-$1");
  return xVal - yVal;
}

jQuery.fn.dataTableExt.oSort['brackets_nums-desc'] = function (x, y) {
  xVal = x.toString().replace(/\((\d+)\)/, "-$1");
  yVal = y.toString().replace(/\((\d+)\)/, "-$1");
  return yVal - xVal;
}

$(document).ready(function () {
  $('#example').dataTable({
    "sPaginationType": "full_numbers",
    "bJQueryUI": true,
        "bFilter": true,
        "bRetrieve": true,
        "bStateSave": true,
        "aoColumns": [{}, {
        "sType": "brackets_nums"
    }]
  });
})

我删除了Angular过滤器,因为它没有必要,所以基本上这个解决方案中唯一的Angular是使用ng-repeat。 但它的确有效!