排序IP地址AngularJS

时间:2018-02-08 22:26:45

标签: angularjs sorting filter html-table ng-filter

我有一个表头IP地址,它使用AngularJS对其进行排序。 不幸的是,它似乎没有对IP地址进行排序。

<th class="text-left">
    <a href="" ng-click="sortType = 'device.ip_address'; sortReverse = !sortReverse">
        IP Address
    </a>
</th>

enter image description here

我想用这样的东西

sortFn: function (a, b) {
    if (a == b) return 0;
    if ( +a.replace(/\./g, '') < +b.replace(/\./g, '')) return - 1;
    return 1;
}

如何使用上面的此功能作为我的排序功能?

问题

如何使用AngularJS实现这一目标?

我现在对任何建议持开放态度。

任何提示/建议/帮助都将非常感谢!

2 个答案:

答案 0 :(得分:1)

您应该“normilize” ips(例如从192.168.1.1192.168.001.001)以正确比较它们:

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.ips = [
    "192.168.1.1",
    "192.168.2.3",
    "192.168.1.00",
    "192.168.1.3"
  ]
  $scope.sortIps = function(ip) {    
    return ip.split('.').map(function(x) {
      return x.padStart(3, "0");
    }).join('');
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <a ng-init='sortReverse=false' href="" ng-click="sortReverse = !sortReverse">
      IP Address
  </a>  
  <ul>
    <li ng-repeat='ip in ips | orderBy : sortIps : sortReverse'>{{ip}}</li>
  </ul>
</div>

答案 1 :(得分:1)

如果您使用ng-repeat显示表格的行,则无需创建自定义函数,只需将IP地址转换为数字

$scope.sortIp = function(ip){
    return parseInt(ip.split('.').join(""));
};

让angularjs的orderBy过滤器为你完成工作。

<button ng-click="order = !order">Order</button>
<div ng-repeat="item in items | orderBy:sortIp:order ">
    {{item}}
</div>

orderBy也为asc / desc排序

取第二个参数(true / false)

<强> Demo