Dynamische ng-Repeat in AngularJS

Mein Winkelregler istDynamische ng-Repeat in AngularJS

$scope.dyna = [ 
    { "name": "parshuram", "age": 24 }, 
    { "name": "Tejash", "age": 26 }, 
    { "name": "Vinayak", "age": 25 } 
];

Mein html

<table> 
    <tbody> 
    <tr ng-repeat="test in dyna"> 
    <td>{{test.name}}</td> 
    <td>{{test.age}}</td> 
    </tr> 
    </tboody> 
</table>

Das funktioniert richtig, und Ausgänge

Parshuram 24 
Tejash 26

Aber wenn eine andere Variable hinzugefügt Meine Scope-Variable, ich muss Änderungen in meiner HTML-Tabelle vornehmen:

$scope.dyna = [ 
     { "name": "parshuram", "age": 24 ,"void": true}, 
     { "name": "Tejash", "age": 26,"void" : false } 
    ]; 

    <table> 
     <tbody> 
     <tr ng-repeat= "test in dyna"> 
     <td>{{test.name}}</td> 
     <td>{{test.age}}</td> 

     <!-- I don't want to have to add this, the columns should be added dynamically --> 
     <td>{{test.void}}</td> 
     </tr> 
     </tboody> 
    </table>

Können die Spalten in diesem Fall dynamisch generiert werden, indem beispielsweise alle meine Objektvariablen aus dem Bereich abgerufen werden?

Quelle

2016-11-25 Parshuram Kalvikatte

check key, value methode in ng-repeat –

ng-repeat kann Schleife über Objekt:

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

jedoch wie in den docs oben verlinkten erwähnt, gibt es ein paar Einschränkungen im Vergleich zu einem ng-repeat, der auf Arrays funktioniert:

Die JavaScript-Spezifikation definiert nicht die Reihenfolge der für ein Objekt zurückgegebenen Schlüssel , daher stützt sich Angular auf die Reihenfolge, die der Browser bei der Ausführung des Schlüssels in myObj zurückgibt. Browser folgen im Allgemeinen der Strategie der Bereitstellung von Schlüsseln in der Reihenfolge, in der sie definiert wurden, , obwohl es Ausnahmen gibt, wenn Schlüssel gelöscht und wieder aktiviert werden. Weitere Informationen finden Sie auf der MDN-Seite zum Löschen.

ngRepeat wird still Objektschlüssel ignoriert mit $ beginnen, weil es ein Präfix von Angular für öffentliche ($) und private ($$) Eigenschaften verwendet wird.

Die integrierten Filter orderBy und filter funktionieren nicht mit Objekten, und wird einen Fehler ausgeben, wenn er mit einem verwendet wird.

Quelle

2016-11-25 08:14:30

Es funktioniert dank ich bin nicht besorgt über die Reihenfolge, tut diese Methode wie jede andere Einschränkung –

@Parshuram Nicht, dass ich keine kenne –

-2

gerade wieder machen es einen weiteren ng-Wiederholung in der Schleife für die Testvariable setzen:

$scope.dyna = [{ "name": "parshuram", "age": 24 ,"void": true}, { "name": "Tejash", "age": 26,"void" : false }]; 

    <table> 
     <tbody> 
     <tr ng-repeat= "test in dyna"> 

      <td ng-repeat="t in test">{{test[t]}</td> // just like this 
     </tr> 
     </tboody> 
    </table>

Quelle

2016-11-25 07:58:28 user3112115

Sie sollten mit (Schlüssel, Wert) Iteration der Lage zu tun, dass.

Wäre schön, Geige zu haben, um zu überprüfen, aber so etwas wie sein würde: key/values as well

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

Quelle

2016-11-25 08:03:04 Zyga

Umgekehrte Reihenfolge. – Feeco

Wenn bei 'Laufzeit', ich weiß es nicht.Ansonsten:

<div ng-controller="MyCtrl"> 
    <table> 
    <tbody> 
    <tr ng-repeat= "test in dyna"> 
     <td ng-repeat="key in objectKeys(test)">{{test[key]}}</td> 
    </tr> 
    </tbody> 
    </table> 
</div>

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    $scope.dyna = [ 
     { "name": "parshuram", "age": 24 }, 
     { "name": "Tejash", "age": 26 }, 
     { "name": "Vinayak", "age": 25 } 
    ]; 

    $scope.objectKeys = function (object) { 
     var keys = Object.keys(object); 
     keys.splice(keys.indexOf('$$hashKey', 1)) 
     return keys; 
    } 

}

fiddle

Quelle

2016-11-25 08:47:14 Feeco

HTML

<html> 
<script src="library/angular.min.js"></script> 
<script src="practice.js"></script> 
<head> 
</head> 
<body ng-app="app"> 
<div ng-controller="test1" ng-bind-html="result"> 
</div> 
</body> 
</html>

AngularJS

angular.module('app',[]).controller('test1',['$scope','$compile','$sce',function($scope,$compile,$sce){ 
    $scope.dyna = [ 
    { "name": "parshuram", "age": 24 }, 
    { "name": "Tejash", "age": 26 }, 
    { "name": "Vinayak", "age": 25 } 
]; 
$scope.result="<table><tbody>"; 
for(var i=0;i<$scope.dyna.length;i++){ 
     $scope.result+="<tr>"; 
     for(var key in $scope.dyna[i]) 
      if($scope.dyna[i].hasOwnProperty(key)) 
       $scope.result+='<td>'+$scope.dyna[i][key]+'</td>'; 
     $scope.result+="</tr>"; 
} 
    $scope.result+="</tbody></table>"; 
    $scope.result=$sce.trustAsHtml($scope.result); 
}]);

Dies ist eine andere Art und Weise, in HTML-Controller zu schaffen.

Quelle

2016-11-26 11:25:26 shahab

Nein, ich möchte dies nicht tun, ich spiele nicht in meinem Controller, meine HTML-String kommt vom Server und ich bin nur verbindlich hier, damit dies nicht für mich funktioniert –

dies ist eine Möglichkeit für die Erstellung von HTML dynamisch, auch für die Erstellung von HTML in Server-Seite. aber ng-repeat ist einfach und besser. – shahab

Dynamische ng-Repeat in AngularJS

Antwort

Verwandte Themen