Angularjs - ng-repeat: ключ доступа и значение из объекта массива JSON

У меня есть объект JSON Array, как показано ниже.

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

Я хочу получить ключи и значения отдельно, используя ng-repeat в angular.js. Я пробовал следующий код, но не работал.

<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

Я использую некоторые <tr> и <td> в html. Но ничего не отображается на экране. Коды показаны ниже.

<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. Я пробовал лучше. Но не повезло. Будет здорово, если вы сможете мне помочь в этом. Спасибо заранее.

Ответы

Ответ 1

У вас есть массив объектов, поэтому вам нужно использовать ng-repeat дважды, например:

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

Ответ 2

Я только что начал проверять 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>

Ответ 3

Решение У меня есть объект 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>

Ответ 4

попробуйте это.

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