web-dev-qa-db-ja.com

angularjs-ng-repeat：JSON配列オブジェクトのキーと値にアクセスします

以下に示すようなJSON配列オブジェクトがあります。

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

Angle.jsのng-repeatを使用して、キーと値を別々に取得したい。次のコードを試しましたが、機能しません。

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

問題は中括弧「[」と「]」にあると思います。誰も問題を解決する方法を教えてもらえますか？

編集済み：

返信ありがとうございます。あなたのコードとその動作を試しました。しかし、私の本当の要件は、以下に示すようにアイテムを表示することです。

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

HTMLで<tr>と<td>を使用しています。しかし、画面には何も表示されません。コードを以下に示します。

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

別の<tr>内の<tr>はhtmlで許可されていないことを知っています。私はベストを尽くしましたが、運はありません。あなたがこれで私を助けることができれば、それは素晴らしいでしょう。前もって感謝します。

jsonangularjs
34
Ajith

オブジェクトの配列があるので、次のようにng-repeatを2回使用する必要があります。

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

例： http://jsfiddle.net/Vwsej/

編集：

オブジェクト内のプロパティの順序は保証されないことに注意してください。

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

例： http://jsfiddle.net/Vwsej/2/

54
CD..

私はちょうどAngularをチェックアウトし始めたので（それを達成するためのより最適な他の方法があると確信しています）、ng-repeatの例を探しているときにこの質問に出会いました。

更新者による要件（更新あり）：

「...しかし、私の本当の要件は、以下に示すようにアイテムを表示することです。」

現実世界で十分に（そしてシンプルに）見えたので、私はそれを試して、正確な目的の構造を取得しようとすると考えました。

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>

LimitTo：（n）フィルターがキーです。複数のng-repeatを使用することが最適な方法であるかどうかはまだわかりませんが、現在別の代替案を考えることはできません。

6
arunmenon

ソリューション私はデータを持つjsonオブジェクトを持っています

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

次のアプローチを使用して、ng-repeatを反復処理し、リストの代わりにテーブル形式を使用できます。

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

これを試して..

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