Denetleyicimde aşağıdaki gibi verilerim var:
$scope.object = data
Şimdi bu veriler anahtarları ve değerleri olan sözlüktür json.
Özniteliğe object.nameşablonda erişebilirim . Ben de tuşları üzerinde yineleme ve gibi tabloda görüntülemek için herhangi bir yolu var mı
<tr><td> {{key}} </td> <td> data.key </td>
Veriler şöyle
{
"id": 2,
"project": "wewe2012",
"date": "2013-02-26",
"description": "ewew",
"eet_no": "ewew",
}Yanıtlar:
Nasıl olur:
<table>
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
</table>Bu yöntem dokümanlarda listelenmiştir: https://docs.angularjs.org/api/ng/directive/ng
ngRepeat. Aslında, bir zamanlar çekirdek bir ekip üyesinin bunu yapma yeteneğini uyguladığına pişman oldum! Denetleyicideki nesneyi bir diziye dönüştürmek genellikle daha iyidir; bu, niyeti daha açık hale getirir ve bazı durumlarda garip / öngörülemeyen davranış riskini azaltır. Ve her zamanki gibi sıralayabilirsiniz. :-)
Object.getOwnPropertyNames(data).map(k => ({key:k, value:data[k]));.
Özellik değerini iki yönlü ciltleme ile düzenlemek istiyorsanız:
<tr ng-repeat="(key, value) in data">
<td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>ng-model="value"mi?
ng-repeataslında nesne üzerinde yineleniyor ve anahtar / değer çiftleri döndürüyor. Şöyle düşünün for(var value in arrayOfValues) { ... }. Değişkeni döngünüzün valueiçine yeniden atarsanız, içindekileri değiştirmezsiniz arrayOfValues, sadece valueyeni bir nesneyi yeniden işaretlersiniz .
Bunu yapmak için açısal bir yerleşik işlevi olduğunu sanmıyorum, ancak bunu tüm başlık adlarını içeren ayrı bir kapsam özelliği oluşturarak yapabilirsiniz ve bu özelliği otomatik olarak bu şekilde doldurabilirsiniz:
var data = {
foo: 'a',
bar: 'b'
};
$scope.objectHeaders = [];
for ( property in data ) {
$scope.objectHeaders.push(property);
}
// Output: [ 'foo', 'bar' ]anahtar / değer çiftlerinin alfabetik sırada görüntülenmesini önlemek için aşağıdaki prosedürü takip edebiliriz.
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>Bir yapılacaklar listesi nesnenin üzerinde döngüler, örneğin 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>Burada tam örnek: -
<!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. Javascript'inizde (denetleyici) veya html'nizde (açısal görünüm) yapabilirsiniz ...
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>Html yolunun daha açısal olduğuna inanıyorum, ancak kontrol cihazınızda da yapabilir ve html'nizde alabilirsiniz ...
Ayrıca Nesne anahtarlarına bakmak için kötü bir fikir değil, ihtiyacınız olduğunda size bir dizi anahtar verir, daha fazla bilgi burada:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
İşte çalışan bir örnek:
<div class="item item-text-wrap" ng-repeat="(key,value) in form_list">
<b>{{key}}</b> : {{value}}
</div>düzenlenmiş