proyecto instalar crear componente comandos cli javascript json angularjs angularjs-ng-repeat

javascript - instalar - crear proyecto angularjs



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

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.


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


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>


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.



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>


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


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>