簡體   English   中英

排序IP地址AngularJS

[英]Sort IP Address AngularJS

我有一個表頭 IP 地址,它使用 AngularJS 對其進行排序。 不幸的是,它似乎沒有對 IP 地址進行排序。

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

在此處輸入圖像描述

我想用這樣的東西

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

我如何使用上面的這個函數作為我在 AngularJS 中的排序函數?

您應該規范化IP(例如,從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>

如果您使用 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)

演示

我使用以下函數對 IP 地址進行排序

const convertToNumber = (address) => {
    if (address === null || address === undefined) return null;
    if (address.indexOf(".") < 0) return address.padEnd(12, "0");

    return parseInt((address.split(".")
        .map(item => item.padEnd(3, "0"))
        .join("").padEnd(12,"0")));
};

對於上述 IP 地址,您應該有 ips = [ "192.168.1.1", "192.168.2.3", "192.168.1.00", "192.168.1.3" ].map(item=>console.log(convertToNumber(item)) );

192168100100 192168200300 192168100000 192168100300,

可以應用相同的方法對文檔部分進行排序(1.1、1.1.1、2.1.2 等)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM