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",
}
Jawaban:
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
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. :-)
Object.getOwnPropertyNames(data).map(k => ({key:k, value:data[k]));.
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>
ng-model="value"?
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.
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' ]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>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>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> 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. 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
Berikut ini contoh kerjanya:
<div class="item item-text-wrap" ng-repeat="(key,value) in form_list">
<b>{{key}}</b> : {{value}}
</div>diedit