Bagaimana cara mengulangi kunci dan nilai dengan ng-repeat di AngularJS?

679

Di controller saya, saya punya data seperti: $scope.object = data

Sekarang data ini adalah kamus dengan kunci dan nilai dari json.

Saya dapat mengakses atribut dengan object.namedi templat. Apakah ada cara yang saya bisa mengulangi tombol juga dan menampilkannya dalam tabel seperti

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

Datanya seperti ini

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

angularjs angularjs-ng-repeat pengguna192362127
sumber

1407

Bagaimana tentang:

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

Metode ini tercantum dalam dokumen: https://docs.angularjs.org/api/ng/directive/ngRepeat

Josh David Miller
sumber

1

Ini seharusnya bekerja: plnkr.co/edit/7AQF6k7hf2aZbWFmhVoX?p=preview . Bisakah Anda memodifikasinya sampai berhenti bekerja?

Josh David Miller

2

Itu bekerja seperti pesona. Satu-satunya tangkapan adalah bahwa itu akan di-abjad oleh tombol sehingga penamaan itu penting jika urutan barang relevan dengan tampilan.

nama tampilan

29

@IsabelHM Karena berbagai alasan, banyak dari kami merekomendasikan untuk tidak mengulangi objek di dalam ngRepeat. Bahkan, saya pernah mendengar seorang anggota tim inti menyesal pernah menerapkan kemampuan untuk melakukannya! Biasanya lebih baik untuk mengubah objek di controller ke array; ini membuat niat menjadi lebih jelas dan mengurangi risiko perilaku aneh / tidak terduga dalam kasus-kasus tertentu. Dan Anda bisa menyortir dengan cara biasa. :-)

Josh David Miller

2

Seperti yang dikatakan IsabelHM, outputnya dipesan sesuai abjad dengan nama. Apakah ada cara untuk memaksanya agar tidak melakukannya?

pemain baru

4

@sethflowers Seperti yang saya sebutkan di komentar sebelumnya, saya tidak merekomendasikan untuk mengulangi kunci pada objek. Akan lebih baik untuk mengubahnya menjadi array di controller Anda. Dengan asumsi tidak ada cara idiomatic untuk melakukan hal ini berdasarkan model bisnis Anda, ES6 membuatnya sangat mudah: Object.getOwnPropertyNames(data).map(k => ({key:k, value:data[k]));.

Josh David Miller

132

Jika Anda ingin mengedit nilai properti dengan ikatan dua arah:

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

cbk
sumber

2

Terima kasih! Karena penasaran, apakah Anda menemukan teknik ini di dokumen di suatu tempat? Saya mencari dengan sia-sia sampai menemukan jawaban Anda di sini.

Roger

@ cbk: Ini yang saya cari .. Terima kasih

JKA

Terima kasih banyak, kamu menyelamatkan hariku :)

Sergey

4

@ cbk bukankah ini sama dengan menggunakan ng-model="value"?

Mike Harrison

1

@ MikeHarrison ng-repeatpada dasarnya iterasi objek dan mengembalikan pasangan nilai kunci. Pikirkan itu seperti for(var value in arrayOfValues) { ... }. Jika Anda menetapkan ulang variabel valuedi dalam loop Anda, Anda tidak mengubah apa yang ada di dalamnya arrayOfValues, Anda hanya menunjuk kembali valueke objek baru.

Jon Senchyna

12

Saya tidak berpikir ada fungsi bawaan di sudut untuk melakukan ini, tetapi Anda bisa melakukan ini dengan membuat properti lingkup terpisah yang berisi semua nama header, dan Anda dapat mengisi properti ini secara otomatis seperti ini:

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

$scope.objectHeaders = [];

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

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

Felipe Castro
sumber

1

Jawaban Anda berfungsi dengan baik jika seseorang perlu mengulang-ulang data di dalam pengontrol sudut (OP meminta loop tampilan).

Antonio Max

5

kita dapat mengikuti prosedur di bawah ini untuk menghindari tampilan nilai kunci dalam urutan abjad.

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>

pengguna3414423
sumber

Gandakan dalam kata kunci tidak diucapkan

amanuel2

4

Contoh daftar todo yang mengulang objek dengan 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>

Luaskan cuplikan

Ashish Saxena
sumber

1

Komentar tentang tidak menggunakan tanda kurung siku sangat membantu. Perubahan itu memperbaiki kode saya. Terima kasih.

Michael Khalili

Saya juga. Adakah yang bisa menjelaskan mengapa menggunakan kurung keriting memperbaiki kode saya?

beingalex

1

Contoh lengkap di sini: -

<!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>

Ajay Kumar
sumber

1

    Use below code it is working to display your key and value here is key start with 1:
         <tr ng-repeat="(key,value) in alert_list" >
                   <td>{{key +1}}</td>
                   <td>{{value.title}}</td>
                 </tr>
Below is document link for it.

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

Chirag Prajapati
sumber

0

Anda dapat melakukannya di javascript (pengontrol) atau di html (tampilan sudut) ...

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>

Saya percaya cara html lebih sudut, tetapi Anda juga dapat melakukannya di controller Anda dan mengambilnya di html Anda ...

juga bukan ide yang buruk untuk melihat kunci Objek, mereka memberi Anda array kunci jika Anda membutuhkannya, info lebih lanjut di sini:

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

Alireza
sumber

-2

Berikut ini contoh kerjanya:

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

diedit

Nakul Wali
sumber

Bagaimana cara mengulangi kunci dan nilai dengan ng-repeat di AngularJS?

Jawaban: