【问题标题】:Sort IP Address AngularJS排序IP地址AngularJS
【发布时间】:2018-07-19 15:10:18
【问题描述】:

我有一个表头 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 中使用上面的这个函数作为我的排序函数?

【问题讨论】:

  • 你能解释一下你所拥有的有什么问题吗?
  • 它似乎没有排序。因为它把它当作一个字符串。
  • 创建自定义过滤器:.filter('myFilter', function() { return function(ips, reverse) { var temp = ips.sort(sortFn); return reverse ? temp.reverse() : temp; }}).

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


【解决方案1】:

您应该规范化 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>

【讨论】:

    【解决方案2】:

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

    【讨论】:

    • 我得到了我的地图到 ng-click,您能否将您的建议添加到另一个与 ng-click 一致的版本?
    • 我也收到了TypeError: Cannot read property 'split' of undefined
    • 现在,我有这个&lt;a href="" ng-click="sortIp(ip_address);sortReverse = !sortReverse"&gt;
    • 能否请您提供您的代码的小提琴或plunker,这样我们可以更快地计算出来
    • @ihue,您应该按部分比较 ips,而不是通过简单的连接。在[ "192.168.1.00", "192.168.1.2", "192.168.1.3","192.168.1.1"] 的情况下 - "192.168.1.00" 将是最棒的。
    猜你喜欢
    • 2013-06-06
    • 2017-02-20
    • 1970-01-01
    • 1970-01-01
    • 2013-09-12
    • 2016-08-17
    • 2011-10-02
    • 2016-03-04
    • 1970-01-01
    相关资源
    最近更新 更多