it-swarm.com.de

Wie kann man mit ng-repeat in AngularJS über die Schlüssel und Werte iterieren?

In meinem Controller habe ich Daten wie: $scope.object = data

Diese Daten sind nun das Wörterbuch mit Schlüsseln und Werten aus json.

Ich kann mit object.name in der Vorlage auf das Attribut zugreifen. Gibt es eine Möglichkeit, die Tasten zu durchlaufen und in Tabellenform anzuzeigen?

<tr><td> {{key}} </td> <td> data.key </td>

Die Daten sind wie folgt

{
    "id": 2,
    "project": "wewe2012",
    "date": "2013-02-26",
    "description": "ewew",
    "eet_no": "ewew",
}
669
user192362127

Wie wäre es mit:

<table>
  <tr ng-repeat="(key, value) in data">
    <td> {{key}} </td> <td> {{ value }} </td>
  </tr>
</table>

Diese Methode ist in den Dokumenten aufgeführt: https://docs.angularjs.org/api/ng/directive/ngRepeat

1379

Wenn Sie den Eigenschaftswert in zwei Richtungen binden möchten:

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

Ich glaube nicht, dass angular dafür eine eingebaute Funktion enthält, aber Sie können dies tun, indem Sie eine separate Bereichseigenschaft erstellen, die alle Kopfzeilennamen enthält, und Sie können diese Eigenschaft automatisch wie folgt füllen:

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

$scope.objectHeaders = [];

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

// Output: [ 'foo', 'bar' ]
13
Felipe Castro

wir können wie folgt vorgehen, um die Anzeige von Schlüsselwerten in alphabetischer Reihenfolge zu vermeiden.

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>
5
user3414423

Ein Aufgabenliste Beispiel, das ein Objekt mit ng-repeat durchläuft:

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>
4
Ashish Saxena

Vollständiges Beispiel hier: -

<!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>
1
Ajay Kumar
    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. 

https://docs.angularjs.org/api/ng/directive/ngRepeat

1

Sie können es in Ihrem Javascript (Controller) oder in Ihrem HTML (Angular View) tun ...

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>

Ich glaube, der HTML-Weg ist mehr angular, aber Sie können auch in Ihrem Controller tun und es in Ihrem HTML abrufen ...

es ist auch keine schlechte Idee, sich die Objektschlüssel anzuschauen. Sie geben Ihnen eine Reihe von Schlüsseln, wenn Sie sie benötigen. Weitere Informationen finden Sie hier:

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

0
Alireza