如何使用角度中的ng-repeat迭代对象

时间:2016-07-10 14:36:41

标签: javascript angularjs html5

我在迭代一个对象时面临问题,我从对象数组中推送了相同的属性(值)。

    {
     id:1,
     id:2,
     id:3
    }

我想在不同的表格行中显示这些ID,如:           1           2           3

任何帮助将不胜感激

4 个答案:

答案 0 :(得分:1)

试试这个:

angular.module('myapp', [])
.controller("mycontroller", function($scope) {
    $scope.items = [
      {
        "id": 1        
      }
      ,{
        "id": 2
      }
      ,{
        "id": 3
      }
    ];
  });
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<div ng-app="myapp" ng-controller="mycontroller" class="container">
  <h4>My items</h4>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="item in items ">{{item.id}}</li>
  </ul>
</div>

答案 1 :(得分:1)

首先,您不能在对象中重复使用相同的键。 假设你有一个名为'idObjects'的对象数组:[{id:1},{id:2},{id:3}],你可以在tr元素上使用ng-repeat,如下所示:

<table>
  <tr ng-repeat="idObj in idObjects">
    <td>{{ idObj.id }}</td>
  </tr>
</table>

答案 2 :(得分:0)

var values = { id:1, id:2, id:3 };
var $scope.objToArr = [];
angular.forEach(values, function(value, key) {
  $scope.objToArr.push(value);
});
你的HTML中的

<tr ng-repeat="idval in objToArr">
    <td>{{ idval}}</td>
  </tr>

它也适用于不同的键。

答案 3 :(得分:0)

首先将json对象转换为数组并将其分配给$scope变量,然后使用ng-repeat迭代数组。

控制器代码:

var jsonObj = { "id1":1, "id2": 2, "id3": 3 }; // your object

// constructing the array with your object;
$scope.idArray = Object.keys(jsonObj).map(function(k) { return jsonObj[k] });

HTML code:

<table>
    <tr ng-repeat="id in idArray track by $index">
        <td>{{ id }}</td>
    </tr>
</table>

希望这可以解决问题。