Comment parcourir les clés et les valeurs avec ng-repeat dans AngularJS?

Que diriez-vous:

 
 
 
 {{key}} 
 
 {{ value }} 
 
  

Cette méthode est répertoriée dans la documentation: https://docs.angularjs.org/api/ng/directive/ngRepeat

Si vous souhaitez modifier la valeur de la propriété avec une liaison bidirectionnelle:

  {{key}}  

Je ne pense pas qu’il y ait une fonction intégrée dans angular pour cela, mais vous pouvez le faire en créant une propriété de scope séparée contenant tous les noms d’en-tête, et vous pouvez remplir cette propriété automatiquement comme ceci:

 var data = { foo: 'a', bar: 'b' }; $scope.objectHeaders = []; for ( property in data ) { $scope.objectHeaders.push(property); } // Output: [ 'foo', 'bar' ] 

Un exemple de liste de tâches qui boucle sur l’object par ng-repeat :

 var app = angular.module('toDolistApp', []); app.controller('toDoListCntrl', function() { var self = this; self.toDoListItems = {};// []; //dont use square brackets if keys are ssortingng rather than numbers. self.doListCounter = 0; self.addToDoList = function() { var newToDoItem = {}; newToDoItem.title = self.toDoEntry; newToDoItem.completed = false; var keyIs = "key_" + self.doListCounter++; self.toDoListItems[keyIs] = newToDoItem; self.toDoEntry = ""; //after adding the item make the input box blank. }; }); app.filter('propsCounter', function() { return function(input) { return Object.keys(input).length; } }); 

   
 Total Items: {{toDoListCntrlAs.toDoListItems | propsCounter}}
 Enter todo Item:  {{toDoListCntrlAs.toDoEntry}} Add Item 
 
 {{$index+1}} : {{key}} : Title = {{ prop.title}} : Status = {{ prop.completed}}  
 
  

Nous pouvons suivre la procédure ci-dessous pour éviter l’affichage des valeurs-clés dans l’ordre alphabétique.

Javascript

 $scope.data = { "id": 2, "project": "wewe2012", "date": "2013-02-26", "description": "ewew", "eet_no": "ewew", }; var array = []; for(var key in $scope.data){ var test = {}; test[key]=$scope.data[key]; array.push(test); } $scope.data = array; 

HTML

 
  {{key}} : {{value}}   

  Use below code it is working to display your key and value here is key start with 1:  {{key +1}} {{value.title}}  Below is document link for it. 

https://docs.angularjs.org/api/ng/directive/ngRepeat

Exemple complet ici: –

           
 
 
{{key}}
 
  
 
  
 
 
 
 
{{key}}
 
  
 
  
 
 
 
 
 
    

Vous pouvez le faire dans votre javascript (contrôleur) ou dans votre HTML (vue angular) …

js:

 $scope.arr = []; for ( p in data ) { $scope.arr.push(p); } 

html:

  {{k}}  

Je crois que la façon HTML est plus angular, mais vous pouvez également faire dans votre contrôleur et le récupérer dans votre HTML …

Ce n’est pas non plus une mauvaise idée de regarder les clés Object, elles vous donnent un tableau des clés si vous en avez besoin, plus d’informations ici:

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Voici un exemple de travail:

 
 {{key}} : {{value}}  

édité