In meinem Controller habe ich Daten wie:
$scope.object = data
Diese Daten sind nun das Wörterbuch mit Schlüsseln und Werten von json.
Ich kann auf das Attribut mit object.namein der Vorlage zugreifen . Gibt es eine Möglichkeit, wie ich auch über die Schlüssel iterieren und sie in einer Tabelle wie anzeigen kann?
<tr><td> {{key}} </td> <td> data.key </td>
Die Daten sind so
{
"id": 2,
"project": "wewe2012",
"date": "2013-02-26",
"description": "ewew",
"eet_no": "ewew",
}
Antworten:
Wie wäre es mit:
<table>
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
</table>
Diese Methode ist in den Dokumenten aufgeführt: https://docs.angularjs.org/api/ng/directive/ngRepeat
ngRepeat. Tatsächlich habe ich einmal gehört, dass ein Mitglied des Kernteams es bedauert, jemals die Möglichkeit dazu implementiert zu haben! Normalerweise ist es besser, das Objekt in der Steuerung in ein Array umzuwandeln. Dies macht die Absicht klarer und verringert in bestimmten Fällen das Risiko für seltsames / unvorhersehbares Verhalten. Und Sie können wie gewohnt sortieren. :-)
Object.getOwnPropertyNames(data).map(k => ({key:k, value:data[k]));.
Wenn Sie den Eigenschaftswert mit bidirektionaler Bindung bearbeiten möchten:
<tr ng-repeat="(key, value) in data">
<td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>
ng-model="value"?
ng-repeatim Wesentlichen über das Objekt und gibt Schlüssel-Wert-Paare zurück. Stellen Sie es sich so vor for(var value in arrayOfValues) { ... }. Wenn Sie die Variable valuein Ihrer Schleife neu zuweisen , ändern Sie nicht, was sich darin befindet, sondern arrayOfValueszeigen nur valueauf ein neues Objekt.
Ich glaube nicht, dass es dafür eine integrierte Funktion in Angular gibt, aber Sie können dies tun, indem Sie eine separate Bereichseigenschaft erstellen, die alle Headernamen enthält, und Sie können diese Eigenschaft automatisch wie folgt ausfüllen:
var data = {
foo: 'a',
bar: 'b'
};
$scope.objectHeaders = [];
for ( property in data ) {
$scope.objectHeaders.push(property);
}
// Output: [ 'foo', 'bar' ]
Wir können das folgende Verfahren befolgen, um die Anzeige von Schlüsselwerten in alphabetischer Reihenfolge zu vermeiden.
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>
Ein ToDo-Listenbeispiel, das das Objekt durchläuft 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>Vollständiges Beispiel hier: -
<!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.
Sie können dies in Ihrem Javascript (Controller) oder in Ihrem HTML (Winkelansicht) tun ...
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>Ich glaube, der HTML-Weg ist eckiger, aber Sie können ihn auch in Ihrem Controller ausführen und in Ihrem HTML-Code abrufen ...
Auch keine schlechte Idee, sich die Objektschlüssel anzusehen, sie geben Ihnen ein Array der Schlüssel, wenn Sie sie brauchen, mehr Infos hier:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
Hier ist ein Arbeitsbeispiel:
<div class="item item-text-wrap" ng-repeat="(key,value) in form_list">
<b>{{key}}</b> : {{value}}
</div>bearbeitet