Question

不知何故，我已经使用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/

Answer 1

请更新您的js文件，该文件位于http://jsfiddle.net/kjuemhua/5/

＆＃13;

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]);
          }
        }
      }
    }
});

＆＃13;

Answer 2

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

<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);
});

Answer 3

检查此解决方案。您不必在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;
      })
    };
});

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

3 个答案: