AngularJS में ng-repeat के साथ कुंजी और मानों पर पुनरावृत्ति कैसे करें?




angularjs-ng-repeat (6)

मेरे नियंत्रक में, मेरे पास डेटा है: $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",
}

आप इसे अपने जावास्क्रिप्ट (नियंत्रक) में या अपने एचटीएमएल (कोणीय दृश्य) में कर सकते हैं ...

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


एक todo सूची उदाहरण जो ng-repeat द्वारा ऑब्जेक्ट पर loops:

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>


मुझे नहीं लगता कि ऐसा करने के लिए कोणीय में एक बिल्टिन फ़ंक्शन है, लेकिन आप इसे सभी शीर्षलेख नामों वाली एक अलग स्कोप संपत्ति बनाकर कर सकते हैं, और आप इस संपत्ति को स्वचालित रूप से इस तरह भर सकते हैं:

var data = {
  foo: 'a',
  bar: 'b'
};

$scope.objectHeaders = [];

for ( property in data ) {
  $scope.objectHeaders.push(property); 
}

// Output: [ 'foo', 'bar' ]

यदि आप दो तरह के बाध्यकारी के साथ संपत्ति मूल्य को संपादित करना चाहते हैं:

<tr ng-repeat="(key, value) in data">
    <td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>

वर्णमाला क्रम में कुंजी-मानों के प्रदर्शन से बचने के लिए हम नीचे प्रक्रिया का पालन कर सकते हैं।

जावास्क्रिप्ट

$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>

यहां पूरा उदाहरण: -

<!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>




angularjs-ng-repeat