Trong bộ điều khiển của tôi, tôi có dữ liệu như:
$scope.object = data
Bây giờ dữ liệu này là từ điển với các khóa và giá trị từ json.
Tôi có thể truy cập thuộc tính với object.nametrong mẫu. Có cách nào để tôi có thể lặp lại các phím và hiển thị chúng trong bảng như
<tr><td> {{key}} </td> <td> data.key </td>
Dữ liệu là như thế này
{
"id": 2,
"project": "wewe2012",
"date": "2013-02-26",
"description": "ewew",
"eet_no": "ewew",
}Câu trả lời:
Làm thế nào về:
<table>
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
</table>Phương pháp này được liệt kê trong các tài liệu: https://docs.angularjs.org/api/ng/directive/ngRepeat
ngRepeat. Trong thực tế, tôi đã từng nghe một thành viên nòng cốt nuối tiếc khi thực hiện khả năng để làm như vậy! Thông thường tốt hơn là chuyển đổi đối tượng trong bộ điều khiển thành một mảng; điều này làm cho ý định rõ ràng hơn và giảm nguy cơ cho hành vi lạ / không thể đoán trước trong một số trường hợp nhất định. Và bạn có thể sắp xếp theo cách thông thường. :-)
Object.getOwnPropertyNames(data).map(k => ({key:k, value:data[k]));.
Nếu bạn muốn chỉnh sửa giá trị thuộc tính với ràng buộc hai chiều:
<tr ng-repeat="(key, value) in data">
<td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>ng-model="value"?
ng-repeatvề cơ bản là lặp lại đối tượng và trả về các cặp khóa-giá trị. Hãy nghĩ về nó như thế nào for(var value in arrayOfValues) { ... }. Nếu bạn gán lại biến valuetrong vòng lặp của mình, bạn không thay đổi những gì bên trong arrayOfValues, bạn chỉ đang trỏ valuelại một đối tượng mới.
Tôi không nghĩ rằng có một hàm dựng sẵn trong góc để thực hiện việc này, nhưng bạn có thể làm điều này bằng cách tạo một thuộc tính phạm vi riêng có chứa tất cả các tên tiêu đề và bạn có thể tự động điền thuộc tính này như sau:
var data = {
foo: 'a',
bar: 'b'
};
$scope.objectHeaders = [];
for ( property in data ) {
$scope.objectHeaders.push(property);
}
// Output: [ 'foo', 'bar' ]chúng ta có thể làm theo quy trình dưới đây để tránh hiển thị các giá trị khóa theo thứ tự bảng chữ cái.
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>Một ví dụ danh sách việc cần làm mà vòng lặp trên đối tượng bằng cách 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>Ví dụ đầy đủ ở đây: -
<!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. Bạn có thể làm điều đó trong javascript (bộ điều khiển) hoặc trong html (chế độ xem góc) của bạn ...
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>Tôi tin rằng cách html góc cạnh hơn, nhưng bạn cũng có thể thực hiện trong trình điều khiển của mình và truy xuất nó trong html của bạn ...
cũng không phải là một ý tưởng tồi khi nhìn vào các phím Object, chúng cung cấp cho bạn một mảng các phím nếu bạn cần chúng, thông tin thêm ở đây:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
Đây là một ví dụ hoạt động:
<div class="item item-text-wrap" ng-repeat="(key,value) in form_list">
<b>{{key}}</b> : {{value}}
</div>đã chỉnh sửa