排序的顺序清单采用了棱角分明的js [英] Sort in order list using angular js

问题描述

不知怎的，我已经成功的色彩高达采用了棱角分明的JS一定程度上有序的显示。但是，作为一个整体它不能正常工作。这里是code和小提琴。我想在绿色，蓝色，黄色和放大器来显示;红秩序

code

  angular.module（MyModule的，[]）.controller（'myController的'，函数（$范围）{$ scope.redsFirst = [];
$ scope.myArray = [
    {
        ID：'123'，
        颜色：红色
    }，
    {
        ID：'234'，
        颜色：蓝
    }，
    {
        ID：'345'，
        颜色：红色
    }，
    {
        ID：'456'，
        颜色：黄
    }，
    {
        ID：'789'，
        颜色：绿色
    }
];getSortedColors（）;
功能getSortedColors（）{
    VAR colorsOrder = {[彩：绿色}，{颜色：蓝}，{颜色：'黄色'}，{颜色：红色}]
  $ scope.redsFirst = angular.copy（$ scope.myArray）;
  $ scope.redsFirst.sort（功能（A，B）{
    返回1 + colorsOrder.map（函数（X）{
        返回x.color;
    }）的indexOf（b.color）
  }）
}
}）;
 

小提琴：

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

解决方案

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

\r

\r

angular.module（MyModule的，[]）\r
\r
.controller（'myController的'，函数（$范围）{\r
    \r
    $ scope.redsFirst = [];\r
    $ scope.myArray = [\r
        {\r
            ID：'123'，\r
            颜色：红色\r
        }，\r
        {\r
            ID：'234'，\r
            颜色：蓝\r
        }，\r
        {\r
            ID：'345'，\r
            颜色：红色\r
        }，\r
        {\r
            ID：'456'，\r
            颜色：黄\r
        }，\r
        {\r
            ID：'789'，\r
            颜色：绿色\r
        }\r
    ];\r
\r
    getSortedColors（）;\r
    功能getSortedColors（）{\r
    VAR colorsOrder = {[彩：绿色}，{颜色：蓝}，{颜色：'黄色'}，{颜色：红色}]\r
      \r
      对（在colorsOrder颜色）{\r
      对于（objColor在$ scope.myArray）{\r
          如果（colorsOrder [颜色]。颜色=== $ scope.myArray [objColor]。颜色）{\r
           $ scope.redsFirst.push（$ scope.myArray [objColor]）;\r
          }\r
        }\r
      }\r
    }\r
}）;

\r

\r

\r

Somehow I've managed the displaying of sorted order of colors upto some extent using Angular jS. But, as a whole its not working properly. Here is the code and fiddle. I'm trying to display in Green,blue, yellow & red order

Code

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

Fiddle :

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

解决方案

please update your js file, same available at 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]);
          }
        }
      }
    }
});

这篇关于排序的顺序清单采用了棱角分明的js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！