Dans mon contrôleur, j'ai des données comme:
$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.namedans le modèle. Existe-t-il un moyen de parcourir les touches également 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",
}Réponses:
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 les documents: https://docs.angularjs.org/api/ng/directive/ngRepeat
ngRepeat. En fait, j'ai entendu un jour un membre de l'équipe centrale regretter d'avoir mis en œuvre cette capacité! Il est généralement préférable de transformer l'objet du contrôleur en tableau; cela rend l'intention plus claire et diminue le risque de comportement étrange / imprévisible dans certains cas. Et vous pouvez trier de la manière habituelle. :-)
Object.getOwnPropertyNames(data).map(k => ({key:k, value:data[k]));.
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>ng-model="value"?
ng-repeatessentiellement sur l'objet et renvoie des paires clé-valeur. Pensez-y comme for(var value in arrayOfValues) { ... }. Si vous réaffectez la variable à l' valueintérieur de votre boucle, vous ne changez pas ce qui est à l'intérieur arrayOfValues, vous redirigez simplement valuevers un nouvel objet.
Je ne pense pas qu'il y ait une fonction intégrée en angulaire pour faire cela, mais vous pouvez le faire en créant une propriété d'étendue distincte contenant tous les noms d'en-tête, et vous pouvez remplir cette propriété automatiquement comme ceci:
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 exemple de liste de tâches qui passe en boucle sur l'objet en 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 façon html est plus angulaire, mais vous pouvez aussi le faire dans votre contrôleur et le récupérer dans votre html ...
aussi pas une mauvaise idée de regarder les clés d'objet, elles vous donnent le 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
Voici un exemple de travail:
<div class="item item-text-wrap" ng-repeat="(key,value) in form_list">
<b>{{key}}</b> : {{value}}
</div>édité