☰

angularjs - ng-repeat: JSON配列オブジェクトからキーと値にアクセスする 質問する

tag-icon • tag-icon json angularjs
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"}
];

angular.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>HTML では別の要素の内部は許可されていないことはわかっています<tr>。最善を尽くしましたが、うまくいきませんでした。この件で助けていただけると助かります。よろしくお願いします。

ベストアンサー1

オブジェクトの配列があるので、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/

おすすめ記事