मेरे नियंत्रक में, मेरे पास डेटा है:
$scope.object = data
अब यह डेटा कुंजियों और मानों वाला शब्दकोश है json।
मैं object.nameटेम्पलेट के साथ विशेषता तक पहुंच सकता हूं । क्या कोई तरीका है कि मैं चाबियों पर भी पुनरावृत्त कर सकता हूं और उन्हें तालिका में प्रदर्शित कर सकता हूं
<tr><td> {{key}} </td> <td> data.key </td>
डेटा इस तरह है
{
"id": 2,
"project": "wewe2012",
"date": "2013-02-26",
"description": "ewew",
"eet_no": "ewew",
}जवाबों:
कैसा रहेगा:
<table>
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
</table>यह विधि डॉक्स में सूचीबद्ध है: https://docs.angularjs.org/api/ng/directive/ngRepeat
ngRepeat। वास्तव में, मैंने एक बार एक कोर टीम के सदस्य को कभी ऐसा करने की क्षमता को लागू करने के लिए खेद व्यक्त किया! आमतौर पर कंट्रोलर में ऑब्जेक्ट को अरै में बदलना बेहतर होता है; यह इरादे को स्पष्ट करता है और कुछ मामलों में अजीब / अप्रत्याशित व्यवहार के लिए जोखिम कम करता है। और आप सामान्य तरीके से हल कर सकते हैं। :-)
Object.getOwnPropertyNames(data).map(k => ({key:k, value:data[k]));:।
यदि आप दो तरह से बाध्यकारी के साथ संपत्ति मूल्य को संपादित करना चाहते हैं:
<tr ng-repeat="(key, value) in data">
<td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>ng-model="value"?
ng-repeatअनिवार्य रूप से ऑब्जेक्ट पर ध्यान केंद्रित कर रहा है और कुंजी-मूल्य जोड़े को वापस कर रहा है। ऐसा समझो for(var value in arrayOfValues) { ... }। यदि आप valueअपने लूप के अंदर वैरिएबल को फिर से असाइन करते हैं, तो आप जो अंदर है उसे नहीं बदल arrayOfValuesरहे हैं, आप सिर्फ valueएक नई वस्तु की ओर फिर से इशारा कर रहे हैं ।
मुझे नहीं लगता कि ऐसा करने के लिए कोणीय में कोई अंतर्निहित कार्य होता है, लेकिन आप यह कर सकते हैं कि सभी हेडर नामों के साथ एक अलग गुंजाइश संपत्ति बनाकर, और आप इस संपत्ति को स्वचालित रूप से इस तरह भर सकते हैं:
var data = {
foo: 'a',
bar: 'b'
};
$scope.objectHeaders = [];
for ( property in data ) {
$scope.objectHeaders.push(property);
}
// Output: [ 'foo', 'bar' ]हम वर्णमाला क्रम में कुंजी-मानों के प्रदर्शन से बचने के लिए नीचे की प्रक्रिया का पालन कर सकते हैं।
जावास्क्रिप्ट
$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;एचटीएमएल
<p ng-repeat="obj in data">
<font ng-repeat="(key, value) in obj">
{{key}} : {{value}}
</font>
</p>एक टूडू सूची का उदाहरण, जो वस्तु के आधार पर समाप्त होता है 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>यहां पूरा उदाहरण: -
<!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. आप इसे अपनी जावास्क्रिप्ट (कंट्रोलर) या अपने html (कोणीय दृश्य) में कर सकते हैं ...
js:
$scope.arr = [];
for ( p in data ) {
$scope.arr.push(p);
}एचटीएमएल:
<tr ng-repeat="(k, v) in data">
<td>{{k}}<input type="text" ng-model="data[k]"></td>
</tr>मेरा मानना है कि html तरीका अधिक कोणीय है, लेकिन आप अपने नियंत्रक में भी कर सकते हैं और इसे अपने html में पुनः प्राप्त कर सकते हैं ...
ऑब्जेक्ट कुंजियों को देखने के लिए एक बुरा विचार भी नहीं है, वे आपको कुंजी का एक सरणी देते हैं यदि आपको उनकी आवश्यकता है, तो यहां अधिक जानकारी:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys