আমার নিয়ামকটিতে আমার মতো ডেটা রয়েছে:
$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. আপনি এটি আপনার জাভাস্ক্রিপ্ট (নিয়ন্ত্রক) বা আপনার এইচটিএমএল (কৌণিক দর্শন) এ করতে পারেন ...
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>আমি বিশ্বাস করি যে এইচটিএমএল উপায়টি আরও কৌণিক, তবে আপনি নিজের নিয়ামকটিতেও এটি করতে পারেন এবং এটি এইচটিএমএলে পুনরুদ্ধার করতে পারেন ...
অবজেক্ট কীগুলি দেখার জন্য এটি খারাপ ধারণা নয়, তারা আপনাকে কীগুলি প্রয়োজন হলে একটি অ্যারে দেয়, আরও তথ্য এখানে:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
এখানে একটি কার্যকারী উদাহরণ:
<div class="item item-text-wrap" ng-repeat="(key,value) in form_list">
<b>{{key}}</b> : {{value}}
</div>সম্পাদিত