Comment parcourir les clés et les valeurs avec ng-repeat dans AngularJS?
Dans mon contrôleur, j'ai des données telles que: $scope.object = data
Maintenant, ces données sont le dictionnaire avec les clés et les valeurs de json.
Je peux accéder à l'attribut avec object.name dans le modèle. Est-il possible de parcourir les touches et de les afficher dans un tableau, comme
<tr><td> {{key}} </td> <td> data.key </td>
Les données sont comme ça
{
"id": 2,
"project": "wewe2012",
"date": "2013-02-26",
"description": "ewew",
"eet_no": "ewew",
}
Que diriez-vous:
<table>
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
</table>
Cette méthode est répertoriée dans la documentation: https://docs.angularjs.org/api/ng/directive/ngRepeat
Si vous souhaitez modifier la valeur de la propriété avec une liaison bidirectionnelle:
<tr ng-repeat="(key, value) in data">
<td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>
Je ne pense pas qu'il y ait une fonction intégrée dans angular pour cela, mais vous pouvez le faire en créant une propriété de portée séparée contenant tous les noms d'en-tête, et vous pouvez remplir cette propriété automatiquement de la manière suivante:
var data = {
foo: 'a',
bar: 'b'
};
$scope.objectHeaders = [];
for ( property in data ) {
$scope.objectHeaders.Push(property);
}
// Output: [ 'foo', 'bar' ]
nous pouvons suivre la procédure ci-dessous pour éviter l'affichage des valeurs-clés dans l'ordre alphabétique.
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>
Un liste de tâches exemple qui boucle sur l'objet par 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>Exemple complet ici: -
<!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.
Vous pouvez le faire dans votre javascript (contrôleur) ou dans votre html (vue angulaire) ...
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>
Je crois que la manière html est plus angular, mais vous pouvez aussi le faire dans votre contrôleur et le récupérer dans votre html ...
ce n’est pas non plus une mauvaise idée de regarder les clés d’objet, elles vous donnent un tableau des clés si vous en avez besoin, plus d’informations ici:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys