Question

我试图对有角度的重复内的多个列进行排序。

第二列是一个数字，但它被视为一个字符串。

在3

之前订购22

这是一个重现问题的JSFiddle。关于如何解决这个问题的任何想法？

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    $scope.data = [
     {name:'Superhero', id:1},
     {name:'Superhero', id:12},
     {name:'Superhero', id:3000},
     {name:'Superhero', id:22},
     {name:'Superhero', id:7},
     {name:'Superhero', id:8},
     {name:'Superhero', id:10}
    ];
}

查看

<div ng-controller="MyCtrl">
  <ul>  
    <li ng-repeat="item in data | orderBy:'[name,id]'">{{item.name}} : {{item.id}}</li>
  </ul>
</div>

订单是..

Superhero : 1
Superhero : 10
Superhero : 12
Superhero : 22
Superhero : 3000
Superhero : 7
Superhero : 8

什么时候应该......

Superhero : 1
Superhero : 7
Superhero : 8
Superhero : 10
Superhero : 12
Superhero : 22
Superhero : 3000

Answer 1

var app = angular.module('todoApp', []);

app.controller("dobController", ["$scope",
  function($scope) {
     $scope.data = [
     {name:'Superhero', id:1},
     {name:'Superhero', id:12},
     {name:'Superhero', id:3000},
     {name:'Superhero', id:22},
     {name:'Superhero', id:7},
     {name:'Superhero', id:8},
     {name:'Superhero', id:10}
    ];
  }

]);

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="MainViewController.js"></script>
</head>


<body ng-controller="dobController">
  <ul>
    <li ng-repeat="item in data| orderBy:'name':true | orderBy:'id':false" >{{item.name}} : {{item.id}}</li>
  </ul>
  </body>

</html>

Answer 2

要实现这一目标，您需要做的非常简单。

将orderBy语句拆分为两个部分
为了将id字段视为数字，请在第二个语句中使用1*id。

这是工作演示。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="item in data | orderBy:'name' | orderBy: '1*id'">{{item.name}} : {{item.id}}</li>
        </ul>
    </div>

    <script>
        var myApp = angular.module('myApp',[]);
        
        myApp.controller('MyCtrl', function($scope) {
            $scope.data = [
                     {name:'Superhero', id:1},
                     {name:'Superhero', id:12},
                     {name:'Superhero', id:3000},
                     {name:'Superhero', id:22},
                     {name:'Superhero', id:7},
                     {name:'Superhero', id:8},
                     {name:'Superhero', id:10}
                    ];
        });
        
    </script>
</body>

</html>

或者您可以将它们组合在一个orderBy语句orderBy:['name', '1*id']

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="item in data | orderBy:['name', '1*id']">{{item.name}} : {{item.id}}</li>
        </ul>
    </div>

    <script>
        var myApp = angular.module('myApp',[]);
        
        myApp.controller('MyCtrl', function($scope) {
            $scope.data = [
                     {name:'Superhero', id:1},
                     {name:'Superhero', id:12},
                     {name:'Superhero', id:3000},
                     {name:'Superhero', id:22},
                     {name:'Superhero', id:7},
                     {name:'Superhero', id:8},
                     {name:'Superhero', id:10}
                    ];
        });
        
    </script>
</body>

</html>

角度多列按顺序转换为字符串

2 个答案: