使用角度 js 按顺序列表排序

Sort in order list using angular js

本文关键字：顺序列表排序 js 更新时间：2023-09-26

不知何故，我已经使用Angular jS在一定程度上管理了颜色排序顺序的显示。但是，总的来说，它无法正常工作。这是代码和小提琴。我正在尝试以绿色，蓝色，黄色和红色顺序显示

法典

angular.module('MyModule', [])
.controller( 'MyController', function($scope){
$scope.redsFirst=[];
$scope.myArray = [
    {
        id: '123',
        color: 'red'
    },
    {
        id: '234',
        color: 'blue'
    },
    {
        id: '345',
        color: 'red'
    },
    {
        id: '456',
        color: 'yellow'
    },
    {
        id: '789',
        color: 'green'
    }
];
getSortedColors();
function getSortedColors() {
    var colorsOrder = [{color:'green'},{color:'blue'},{color:'yellow'},{color:'red'}]
  $scope.redsFirst=angular.copy($scope.myArray); 
  $scope.redsFirst.sort(function(a,b){
    return 1+colorsOrder.map(function(x){           
        return x.color; 
    }).indexOf(b.color)
  })
}
});

小提琴：

http://jsfiddle.net/kjuemhua/4/

请更新您的JS文件，同样可在 http://jsfiddle.net/kjuemhua/5/

angular.module('MyModule', [])
.controller( 'MyController', function($scope){
    
    $scope.redsFirst=[];
    $scope.myArray = [
        {
            id: '123',
            color: 'red'
        },
        {
            id: '234',
            color: 'blue'
        },
        {
            id: '345',
            color: 'red'
        },
        {
            id: '456',
            color: 'yellow'
        },
        {
            id: '789',
            color: 'green'
        }
    ];
    getSortedColors();
    function getSortedColors() {
    	var colorsOrder = [{color:'green'},{color:'blue'},{color:'yellow'},{color:'red'}]
      
      for(color in colorsOrder) {
      	for(objColor in $scope.myArray)	 {
          if(colorsOrder[color].color === $scope.myArray[objColor].color) {
           $scope.redsFirst.push($scope.myArray[objColor]);
          }
        }
      }
    }
});

如果您的目标是按颜色排序，答案是：

<div ng-app='MyModule' ng-controller='MyController'>
    <h1>Unsorted</h1>
    <ul>
        <li ng-repeat='item in myArray'>{{item.color}} - {{item.id}}</li>
    </ul>
    <h1>Sorted by color</h1>
    <ul>
        <li ng-repeat="item in redsFirst | orderBy: 'color'">{{item.color}} - {{item.id}}</li>
    </ul>
</div>

在 js 文件中：

angular.module('MyModule', [])
.controller( 'MyController', function($scope){
    $scope.redsFirst=[];
    $scope.myArray = [
        {
            id: '123',
            color: 'red'
        },
        {
            id: '234',
            color: 'blue'
        },
        {
            id: '345',
            color: 'red'
        },
        {
            id: '456',
            color: 'yellow'
        },
        {
            id: '789',
            color: 'green'
        }
    ];
       $scope.redsFirst=angular.copy($scope.myArray);
});

检查此解决方案。您不必在 colorsOrder 中声明所有颜色。演示：http://jsfiddle.net/fzLwr921/

angular.module('MyModule', [])
.controller( 'MyController', function($scope){
    $scope.redsFirst=[];
    $scope.myArray = [
        {
            id: '123',
            color: 'red'
        },
        {
            id: '234',
            color: 'blue'
        },
        {
            id: '345',
            color: 'red'
        },
        {
            id: '456',
            color: 'yellow'
        },
        {
            id: '789',
            color: 'green'
        }
    ];
    getSortedColors();
    function getSortedColors() {
        var colorsOrder = [{color:'yellow'},{color:'red'}];
        $scope.redsFirst=angular.copy($scope.myArray).sort(function(a,b){
        var colorsMap = colorsOrder.map(function(x){ return x.color; });
        var indexA = 1+colorsMap.indexOf(a.color);
        var indexB = 1+colorsMap.indexOf(b.color);
        if( indexA*indexB === 0)
            return indexB - indexA;
        else
            return indexA - indexB;
      })
    };
});