No meu controlador, tenho dados como:
$scope.object = data
Agora, esses dados são o dicionário com chaves e valores de json.
Eu posso acessar o atributo com object.nameno modelo. Existe alguma maneira que eu possa iterar sobre as teclas também e exibi-las na tabela como
<tr><td> {{key}} </td> <td> data.key </td>
Os dados são assim
{
"id": 2,
"project": "wewe2012",
"date": "2013-02-26",
"description": "ewew",
"eet_no": "ewew",
}Respostas:
E se:
<table>
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
</table>Este método está listado nos documentos: https://docs.angularjs.org/api/ng/directive/ngRepeat
ngRepeat. De fato, uma vez ouvi um membro da equipe principal se arrepender de ter implementado a capacidade de fazê-lo! Geralmente é melhor transformar o objeto no controlador em uma matriz; isso torna a intenção mais clara e diminui o risco de comportamento estranho / imprevisível em certos casos. E você pode classificar da maneira usual. :-)
Object.getOwnPropertyNames(data).map(k => ({key:k, value:data[k]));.
Se você deseja editar o valor da propriedade com ligação bidirecional:
<tr ng-repeat="(key, value) in data">
<td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>ng-model="value"?
ng-repeatestá essencialmente interagindo sobre o objeto e retornando pares de valores-chave. Pense nisso como for(var value in arrayOfValues) { ... }. Se você redesignar a variável valuedentro de seu loop, não estará alterando o que está dentro arrayOfValues, apenas apontando novamente valuepara um novo objeto.
Eu não acho que exista uma função interna em angular para fazer isso, mas você pode fazer isso criando uma propriedade de escopo separada contendo todos os nomes de cabeçalho, e você pode preencher essa propriedade automaticamente assim:
var data = {
foo: 'a',
bar: 'b'
};
$scope.objectHeaders = [];
for ( property in data ) {
$scope.objectHeaders.push(property);
}
// Output: [ 'foo', 'bar' ]podemos seguir o procedimento abaixo para evitar a exibição de valores-chave em ordem alfabética.
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>Um exemplo de lista de tarefas que faz um loop sobre o objeto 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>Exemplo completo aqui: -
<!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. Você pode fazê-lo no seu javascript (controlador) ou no seu html (vista angular) ...
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>Eu acredito que a maneira html é mais angular, mas você também pode fazer no seu controlador e recuperá-lo no seu html ...
também não é uma má idéia olhar para as chaves de objeto, elas fornecem uma matriz de chaves, se você precisar delas, mais informações aqui:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
Aqui está um exemplo de trabalho:
<div class="item item-text-wrap" ng-repeat="(key,value) in form_list">
<b>{{key}}</b> : {{value}}
</div>editado