排序 IP 地址 AngularJS
Sort IP Address AngularJS
我有一个 table header 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.1
到192.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 来显示 table 的行,您不必创建自定义函数,只需将 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 还采用第二个参数 (true / false) 进行 asc / desc 排序
我使用以下函数对 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 等)进行排序
我有一个 table header 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.1
到192.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 来显示 table 的行,您不必创建自定义函数,只需将 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 还采用第二个参数 (true / false) 进行 asc / desc 排序
我使用以下函数对 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 等)进行排序