javascript - Angularjs orderBy 排序问题 - 即，将 10 排序在 8 之前

Question

我正在开发这个应用程序，该应用程序应该对 py IP 地址进行排序，因此为了解决按字符串排序的问题，我将 IP 地址分解为八位字节，并尝试按每个八位字节连续排序。但是当我将 Angularjs 的“orderBy”函数应用于我的数据时，我遇到了一些问题:

<tr ng-hide="row.length" class="tablehover tr-list" ng-repeat="row in entries | filter:search | orderBy:['ipA','ipB','ipC','ipD']">
                <td class="table-item col-1 col"><img ng-src="./img/{{row.health}}" class="status-color"></td>
                <td class="table-item col-2 col text-ip">{{ row.ipaddr }}</td>
                <td class="table-item col-3 col">{{ row.nickname }}</td>
                <td class="table-item col-4 col text-dns">{{ row.dnsname }}</td>
                <td class="table-item col-5 col text-type">{{ row.type }}</td>
                <td class="table-item col-6 col"><center><img ng-src="./img/{{row.reserved}}" class="status-reserved"></center></td>
                <td class="table-item col-7 col"><div id="editBtn" class="flat icon" name="editBtn" ng-model="editBtn" type="button" ng-click="edit(row)"><img src="./img/edit.png" class="inline-icon edit"></button></div>
                <td class="table-item col-8 col"><div id="deleteBtn" class="flat icon" name="deleteBtn" value="./img/delete.png" ng-click="delete(row)"><img src="./img/cancel.png" class="inline-icon delete"></div></td>
                <!-- these are for sorting purposes only -->
                <td class="hidden">{{ row.subnet }}</td>
                <td class="hidden">{{ row.location }}</td>
                <td class="hidden">{{ row.vlan }}</td>
                <td class="hidden">{{ row.notes }}</td>
                <td class="">{{row.ipA}}.{{row.ipB}}.{{row.ipC}}.{{row.ipD}}</td>
            </tr>

理论上这应该是这样的:

1.1.1.1
8.8.8.8
10.10.10.10

但实际上它的顺序是这样的:

1.1.1.1
10.10.10.10
8.8.8.8

我想避免必须采用八进制并将其转换为 3 位整数(即 001.001.001.001)；我觉得这应该是一件简单的事情，但我刚刚搞砸了一些简单的事情。

我已经尝试过的事情:

强制 Angular 将每个八位字节视为数字(不起作用)

{{ row.ipA | number }}

当每条新记录保存到数据库时，将每个八位字节转换为 float :

var octets = ($scope.ipaddr).split(".");
$scope.ipA = parseFloat(octets[0]);
$scope.ipB = parseFloat(octets[1]);
$scope.ipC = parseFloat(octets[2]);
$scope.ipD = parseFloat(octets[3]);

谢谢!

Answer 1

尝试这样做:

在您的 Controller 中添加此功能:

$scope.ipOrder = function(row){
    return (
            (parseInt(row.ipA)*Math.pow(256,3))+
            (parseInt(row.ipB)*Math.pow(256,2))+
            (parseInt(row.ipC)*256)+
            parseInt(row.ipD));
}

然后在你的ng-repeat中执行以下操作:

ng-repeat="row in entries | filter:search | orderBy:ipOrder

Working Example