Come scorrere le chiavi e i valori con ng-repeat in AngularJS?


679

Nel mio controller, ho dati come: $scope.object = data

Ora questi dati sono il dizionario con chiavi e valori da json.

Posso accedere all'attributo con object.namenel modello. Esiste un modo in cui posso scorrere anche i tasti e visualizzarli come in una tabella

<tr><td> {{key}} </td> <td> data.key </td>

I dati sono così

{
    "id": 2,
    "project": "wewe2012",
    "date": "2013-02-26",
    "description": "ewew",
    "eet_no": "ewew",
}

Risposte:


1407

Che ne dite di:

<table>
  <tr ng-repeat="(key, value) in data">
    <td> {{key}} </td> <td> {{ value }} </td>
  </tr>
</table>

Questo metodo è elencato nei documenti: https://docs.angularjs.org/api/ng/directive/ngRepeat


1
Dovrebbe funzionare: plnkr.co/edit/7AQF6k7hf2aZbWFmhVoX?p=preview . Puoi modificarlo fino a quando non smette di funzionare?
Josh David Miller,

2
Esso funziona magicamente. L'unico problema è che verrà alfabetizzato dai tasti, quindi la denominazione è importante se l'ordine degli articoli è rilevante per il display.
Visualizza nome

29
@IsabelHM Per molte ragioni, molti di noi raccomandano di non ripetere iterazioni su oggetti in un file ngRepeat. In effetti, una volta ho sentito il rimpianto di un membro del core team di aver mai implementato la possibilità di farlo! Di solito è meglio trasformare l'oggetto nel controller in un array; questo rende più chiaro l'intento e riduce il rischio di comportamenti strani / imprevedibili in alcuni casi. E puoi ordinare nel solito modo. :-)
Josh David Miller,

2
Come diceva IsabelHM, l'output è ordinato alfabeticamente in base al nome. C'è un modo per costringerlo a non farlo?
Newman,

4
@sethflowers Come ho già detto in un commento precedente, non consiglio di ripetere le chiavi degli oggetti. Sarebbe meglio convertirlo in un array nel controller. Supponendo Non c'è modo idiomatico per fare questo in base al modello di business, ES6 rende molto facile: Object.getOwnPropertyNames(data).map(k => ({key:k, value:data[k]));.
Josh David Miller,

132

Se si desidera modificare il valore della proprietà con associazione a due vie:

<tr ng-repeat="(key, value) in data">
    <td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>

2
Grazie! Per curiosità, hai trovato questa tecnica nei documenti da qualche parte? Ho cercato invano fino a trovare qui la tua risposta.
Roger,

@cbk: Questo è quello che stavo cercando .. Grazie
JKA

Grazie mille, mi hai salvato la giornata :)
Sergey,

4
@cbk non è lo stesso che usare ng-model="value"?
Mike Harrison,

1
@MikeHarrison ng-repeatsta essenzialmente iterando sull'oggetto e restituendo coppie chiave-valore. Pensaci come for(var value in arrayOfValues) { ... }. Se riassegni la variabile valueall'interno del tuo ciclo, non stai cambiando ciò che è dentro arrayOfValues, stai semplicemente reindirizzando valuea un nuovo oggetto.
Jon Senchyna,

12

Non penso che ci sia una funzione incorporata in angolare per farlo, ma puoi farlo creando una proprietà di ambito separata contenente tutti i nomi di intestazione e puoi riempire automaticamente questa proprietà in questo modo:

var data = {
  foo: 'a',
  bar: 'b'
};

$scope.objectHeaders = [];

for ( property in data ) {
  $scope.objectHeaders.push(property); 
}

// Output: [ 'foo', 'bar' ]

1
La tua risposta funziona bene se è necessario eseguire il loop dei dati all'interno di un controller angolare (OP ha richiesto un loop di visualizzazione).
Antonio Max,

5

possiamo seguire la procedura seguente per evitare la visualizzazione dei valori-chiave in ordine alfabetico.

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

<p ng-repeat="obj in data">
   <font ng-repeat="(key, value) in obj">
      {{key}} : {{value}}
   </font>
</p>

Duplica nella parola chiave non espressa
amanuel2

4

Un esempio di elenco di todo che passa sopra l'oggetto per ng-repeat:

var app = angular.module('toDolistApp', []);
app.controller('toDoListCntrl', function() {
  var self = this;
  self.toDoListItems = {};// []; //dont use square brackets if keys are string 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;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="toDolistApp">    
  <div ng-controller="toDoListCntrl as toDoListCntrlAs">
    Total Items: {{toDoListCntrlAs.toDoListItems | propsCounter}}<br />
    Enter todo Item:  <input type="text" ng-model="toDoListCntrlAs.toDoEntry"/>
    <span>{{toDoListCntrlAs.toDoEntry}}</span>
    <button ng-click="toDoListCntrlAs.addToDoList()">Add Item</button> <br/>
    <div ng-repeat="(key, prop) in toDoListCntrlAs.toDoListItems"> 
      <span>{{$index+1}} : {{key}}   : Title = {{ prop.title}} : Status = {{ prop.completed}} </span>
    </div>     
  </div>    
</body>


1
Il commento sul non usare parentesi quadre è stato davvero utile. Tale modifica ha corretto il mio codice. Grazie.
Michael Khalili,

Anch'io. Qualcuno può spiegare perché l'uso delle parentesi graffe ha corretto il mio codice?
beingalex,

1

Esempio completo qui: -

<!DOCTYPE html >
<html ng-app="dashboard">
<head>
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-controller="myController">
    <table border='1'>
        <tr ng-repeat="(key,val) in collValues">
            <td ng-if="!hasChildren(val)">{{key}}</td>  
            <td ng-if="val === 'string'">
                <input type="text" name="{{key}}"></input>
            </td>
            <td ng-if="val === 'number'">
                <input type="number" name="{{key}}"></input>
            </td>
            <td ng-if="hasChildren(val)" td colspan='2'>
                <table border='1' ng-repeat="arrVal in val">
                    <tr ng-repeat="(key,val) in arrVal">
                        <td>{{key}}</td>    
                        <td ng-if="val === 'string'">
                            <input type="text" name="{{key}}"></input>
                        </td>
                        <td ng-if="val === 'number'">
                            <input type="number" name="{{key}}"></input>
                        </td>
                    </tr>
                </table>                
            </td>

        </tr>       
    </table>
</body>

<script type="text/javascript">

    var app = angular.module("dashboard",[]);
    app.controller("myController",function($scope){
        $scope.collValues = {
            'name':'string',
            'id':'string',
            'phone':'number',
            'depart':[
                    {
                        'depart':'string',
                        'name':'string' 
                    }
            ]   
        };

        $scope.hasChildren = function(bigL1) {
            return angular.isArray(bigL1);
} 
    });
</script>
</html>


0

Puoi farlo nel tuo javascript (controller) o nel tuo html (vista angolare) ...

js:

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

html:

<tr ng-repeat="(k, v) in data">
    <td>{{k}}<input type="text" ng-model="data[k]"></td>
</tr>

Credo che il modo html sia più angolare, ma puoi anche farlo nel tuo controller e recuperarlo nel tuo html ...

inoltre non è una cattiva idea guardare le chiavi degli oggetti, ti danno l'array delle chiavi se ne hai bisogno, maggiori informazioni qui:

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


-2

Ecco un esempio funzionante:

<div class="item item-text-wrap" ng-repeat="(key,value) in form_list">
  <b>{{key}}</b> : {{value}}
</div>

modificato

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.