web-dev-qa-db-fra.com

angularjs - ng-repeat: clé d'accès et valeur à partir d'un objet tableau JSON

J'ai l'objet JSON Array comme indiqué ci-dessous.

$scope.items = 
    [
    {Name: "Soap",  Price: "25",  Quantity: "10"},
    {Name: "Bag",   Price: "100", Quantity: "15"},
    {Name: "Pen",   Price: "15",  Quantity: "13"}
];

Je veux obtenir les clés et les valeurs séparément en utilisant ng-repeat dans angular.js. J'ai essayé le code suivant mais cela ne fonctionne pas.

<tr ng-repeat="(key, val) in items">
  <td>{{key}}</td> 
  <td>{{val}}</td>
 </tr>

Je crois que le problème vient des accolades '[' et ']'. Quelqu'un peut-il s'il vous plaît me suggérer comment le problème peut être résolu?

Édité:

Merci beaucoup pour la réponse. J'ai essayé votre code et son fonctionnement. Mais ma vraie exigence est d’afficher les éléments comme indiqué ci-dessous. 

Name     Price  Quantity
Soap        25  10
Bag        100  15
Pen         15  13

J'utilise certains <tr> et <td> en HTML. Mais rien ne s'affiche à l'écran. Les codes sont indiqués ci-dessous.

<table>  
 <tr ng-repeat="item in items">
  <tr ng-repeat="(key, val) in item">
      <td>{{key}}</td>
      <td>{{val}}</td>
  </tr>
</tr> 
</table>

Je sais que <tr> à l'intérieur d'un autre <tr> n'est pas autorisé par HTML. J'ai essayé par le meilleur.Mais pas de chance . Ce serait formidable si vous pouviez m'aider dans cette . Merci d'avance.

jsonangularjs
34
Ajith Balakrishnan

Vous avez un tableau d'objets, vous devrez donc utiliser ng-repeat deux fois, par exemple: 

<ul ng-repeat="item in items">
  <li ng-repeat="(key, val) in item">
    {{key}}: {{val}}
  </li>
</ul>

Exemple: http://jsfiddle.net/Vwsej/

Modifier:

Notez que l'ordre des propriétés dans les objets n'est pas garanti.

<table>
    <tr>
        <th ng-repeat="(key, val) in items[0]">{{key}}</th>
    </tr>
    <tr ng-repeat="item in items">
        <td ng-repeat="(key, val) in item">{{val}}</td>
    </tr>
</table>

Exemple: http://jsfiddle.net/Vwsej/2/

53
CD..

Je viens juste de commencer à vérifier Angular (je suis donc tout à fait sûr qu’il existe d’autres moyens plus optimaux de le faire), et j’ai trouvé cette question tout en recherchant des exemples de ng-repeat. 

L'exigence par le poseur (avec la mise à jour):

"... mais ma vraie exigence est d'afficher les éléments comme indiqué ci-dessous .."

semblait assez réaliste (et simple), alors je me suis dit que je pouvais mal essayer et obtenir la structure exacte souhaitée.

angular.module('appTest', [])
  .controller("repeatCtrl", function($scope) {
    $scope.items = [{
      Name: "Soap",
      Price: "25",
      Quantity: "10"
    }, {
      Name: "Bag",
      Price: "100",
      Quantity: "15"
    }, {
      Name: "Pen",
      Price: "15",
      Quantity: "13"
    }];
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="appTest">
  <section ng-controller="repeatCtrl">
    <table>
      <thead>
        <tr ng-repeat="item in items | limitTo:1">
          <th ng-repeat="(key, val) in item">
            {{key}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items">
          <td ng-repeat="(key, val) in item">
            {{val}}
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</body>

Le filtre limitTo: (n) est la clé. Je ne suis toujours pas sûr d'avoir plusieurs méthodes de répétition, mais je ne peux pas penser à une autre alternative pour le moment.

6
arunmenon

Solution J'ai un objet json qui a des données

[{"name":"Ata","email":"[email protected]"}]

Vous pouvez utiliser l'approche suivante pour effectuer une itération dans ng-repeat et utiliser le format de tableau au lieu de liste.

<div class="container" ng-controller="fetchdataCtrl">    
  <ul ng-repeat="item in numbers">
    <li>            
      {{item.name}}: {{item.email}}
    </li>
  </ul>     
</div>
3
Ata ul Mustafa

essaye ça..

<tr ng-repeat='item in items'>
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
0
Rahul Mansharamani