javascript - instalar - crear proyecto angularjs

Angular: no se puede hacer una orden ng-repeatPor trabajo

Question

He intentado muchos ejemplos de ng-repeat con orderBy, pero no puedo hacer que mi json trabaje con eso.

<div ng-app>
<script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<div ng:controller="Main">
<div ng-repeat="release in releases| orderBy:''environment_id''">
{{release.environment_id}}
</div>
</div>
</div>

Y el JSON

function Main($scope) {
$scope.releases = {
"tvl-c-wbap001 + tvl-webapp": {
"timestamp": " 05:05:53 PM ",
"environment_id": "CERT5",
"release_header": "Projects/Dev",
"date": "19 Oct",
"release": "12.11.91-1"
},
"tvl-c-wbap401 + tvl-webapp": {
"timestamp": " 10:07:25 AM ",
"environment_id": "CERT4",
"release_header": "Future Release",
"date": "15 Oct",
"release": "485-1"
},
"tvl-c-wbap301 + tvl-webapp": {
"timestamp": " 07:59:48 AM ",
"environment_id": "CERT3",
"release_header": "Next Release",
"date": "15 Oct",
"release": "485-1"
},
"tvl-c-wbap201 + tvl-webapp": {
"timestamp": " 03:34:07 AM ",
"environment_id": "CERT2",
"release_header": "Next Changes",
"date": "15 Oct",
"release": "13.12.3-1"
},
"tvl-c-wbap101 + tvl-webapp": {
"timestamp": " 12:44:23 AM ",
"environment_id": "CERT1",
"release_header": "Production Mirror",
"date": "15 Oct",
"release": "13.11.309-1"
},
"tvl-s-wbap002 + tvl-webapp": {
"timestamp": " 12:43:23 AM ",
"environment_id": "Stage2",
"date": "15 Oct",
"release": "13.11.310-1"
},
"tvl-s-wbap001 + tvl-webapp": {
"timestamp": " 11:07:38 AM ",
"environment_id": "Stage1",
"release_header": "Production Mirror",
"date": "11 Oct",
"release": "13.11.310-1"
},
"tvl-p-wbap001 + tvl-webapp": {
"timestamp": " 11:39:25 PM ",
"environment_id": "Production",
"release_header": "Pilots",
"date": "14 Oct",
"release": "13.11.310-1"
},
"tvl-p-wbap100 + tvl-webapp": {
"timestamp": " 03:27:53 AM ",
"environment_id": "Production",
"release_header": "Non Pilots",
"date": "11 Oct",
"release": "13.11.309-1"
}
}

No importa lo que escriba, siempre recibo el mismo pedido, o puedo decir, no hay orden en absoluto.

Answer 1

Aquí hay una versión del código de @Julian Mosquera que también admite ordenar por clave de objeto:

yourApp.filter(''orderObjectBy'', function () {
return function (items, field, reverse) {
// Build array
var filtered = [];
for (var key in items) {
if (field === ''key'')
filtered.push(key);
else
filtered.push(items[key]);
}
// Sort array
filtered.sort(function (a, b) {
if (field === ''key'')
return (a > b ? 1 : -1);
else
return (a[field] > b[field] ? 1 : -1);
});
// Reverse array
if (reverse)
filtered.reverse();
return filtered;
};
});

Answer 2

Como se mencionó, solo las matrices están permitidas. Pero para simplificarlo, puede convertir dinámicamente el objeto en una matriz a través de una función de tuberías, como se ve aquí https://gist.github.com/brev/3949705

Simplemente declare el filtro y agréguelo a ng-repeat :)

<div ng-app="myApp">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-controller="Main">
<div ng-repeat="release in releases | object2Array | orderBy:''environment_id''">{{release.environment_id}}</div>
</div>
<script>
var app = angular.module(''myApp'', []).filter(''object2Array'', function() {
return function(input) {
var out = [];
for(i in input){
out.push(input[i]);
}
return out;
}
})
.controller(''Main'',function ($scope) {
$scope.releases = {"tvl-c-wbap001 + tvl-webapp":{"timestamp":" 05:05:53 PM ","environment_id":"CERT5","release_header":"Projects/Dev","date":"19 Oct","release":"12.11.91-1"},"tvl-c-wbap401 + tvl-webapp":{"timestamp":" 10:07:25 AM ","environment_id":"CERT4","release_header":"Future Release","date":"15 Oct","release":"485-1"},"tvl-c-wbap301 + tvl-webapp":{"timestamp":" 07:59:48 AM ","environment_id":"CERT3","release_header":"Next Release","date":"15 Oct","release":"485-1"},"tvl-c-wbap201 + tvl-webapp":{"timestamp":" 03:34:07 AM ","environment_id":"CERT2","release_header":"Next Changes","date":"15 Oct","release":"13.12.3-1"},"tvl-c-wbap101 + tvl-webapp":{"timestamp":" 12:44:23 AM ","environment_id":"CERT1","release_header":"Production Mirror","date":"15 Oct","release":"13.11.309-1"},"tvl-s-wbap002 + tvl-webapp":{"timestamp":" 12:43:23 AM ","environment_id":"Stage2","date":"15 Oct","release":"13.11.310-1"},"tvl-s-wbap001 + tvl-webapp":{"timestamp":" 11:07:38 AM ","environment_id":"Stage1","release_header":"Production Mirror","date":"11 Oct","release":"13.11.310-1"},"tvl-p-wbap001 + tvl-webapp":{"timestamp":" 11:39:25 PM ","environment_id":"Production","release_header":"Pilots","date":"14 Oct","release":"13.11.310-1"},"tvl-p-wbap100 + tvl-webapp":{"timestamp":" 03:27:53 AM ","environment_id":"Production","release_header":"Non Pilots","date":"11 Oct","release":"13.11.309-1"}}
});
</script>

Answer 3

Deberá reformatear el objeto de publicación para que sea una matriz de objetos. Entonces podrás ordenarlos de la forma en que lo intentas.

Answer 4

La orderBy solo funciona con matrices - Ver http://docs.angularjs.org/api/ng.filter:orderBy

También es un gran filtro para utilizar para Objetos en lugar de Arrays @ Angularjs OrderBy en ng-repeat no funciona

Answer 5

el filtro orderBy incorporado ya no funcionará al iterar un objeto. Se ignora debido a la forma en que se almacenan los campos de objeto. Necesitas crear un filtro personalizado

yourApp.filter(''orderObjectBy'', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function (a, b) {
return (a[field] > b[field] ? 1 : -1);
});
if(reverse) filtered.reverse();
return filtered;
};
});
<ul>
<li ng-repeat="item in items | orderObjectBy:''color'':true">{{ item.color }}</li>
</ul>

Answer 6

en la respuesta anterior de Eike Thies, si usamos underscore.js, el filtro podría simplificarse a:

var app = angular.module(''myApp'', []).filter(''object2Array'', function() {
return function(input) {
return _.toArray(input);
}
});

Answer 7

orderby funciona en matrices que contienen objetos con valores inmediatos que se pueden usar como filtros, es decir,

controller.images = [{favs:1,name:"something"},{favs:0,name:"something else"}];

Cuando se repite la matriz anterior, puede usar | orderBy: ''favs'' para referirse a ese valor de inmediato, o use un signo menos al frente para ordenar en orden descendente

<div class="timeline-image" ng-repeat="image in controller.images | orderBy:''-favs''">
<img ng-src="{{ images.name }}"/>
</div>