如何使用ng-repeat以角度为单位获取数组内的Json对象值

时间:2017-07-07 05:18:30

标签: angularjs json

我有一组JSON对象,如下所示:

 todoList:
      [ { todo: 'dummy1', id: 595b9c2bb4b9992a4041d6e3 },
      { todo: 'dummy2', id: 595e4ffc62e38e3844f8d43a },
      { todo: 'dummy3', id: 595e4fff62e38e3844f8d43b },
      { todo: 'dummy4', id: 595f00c1d18df61840ad1ba3 } ]

我想在我的视图中使用ng-repeat,如下面的

<div ng-repeat ="todo in todoList">
  <label>
     {{ todo }}
   </label>
 </div>

请告诉我如何从todo List中仅访问todo字段?

3 个答案:

答案 0 :(得分:1)

使用 {{todo.todo}}

<div ng-repeat ="todo in todoList">
  <label>
     {{ todo.todo}}
   </label>
 </div>

<强>样本

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope, $http) {
 $scope.todoList=
      [ { todo: 'dummy1', id: "595b9c2bb4b9992a4041d6e3" },
      { todo: 'dummy2', id: "595e4ffc62e38e3844f8d43a" },
      { todo: 'dummy3', id: "595e4fff62e38e3844f8d43b" },
      { todo: 'dummy4', id: "595f00c1d18df61840ad1ba3" } ];
});
<!DOCTYPE html>
<html>
<head> 
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <div ng-app="myApp" ng-controller="AppCtrl">
 <div ng-repeat ="todo in todoList">
  <label>
     {{ todo.todo }}
   </label>
 </div>
  </div>
</body>

</html>

答案 1 :(得分:1)

您可以使用

<div ng-repeat ="todo in todoList">
  <label>
     {{ todo.todo }}
   </label>
  <label>
     {{ todo.id}}
   </label>
 </div>

如果要调试,可以使用json过滤器打印json对象。

<div ng-repeat ="todo in todoList">
  <label>
     {{ todo|json}}
   </label>
 </div>

答案 2 :(得分:1)

这里todo从todoList对象成为一个对象,然后你可以从中访问属性,如todo.todo和todo.id

<div ng-repeat ="todo in todoList">
 <label>
  {{ todo.todo }}
 </label>
</div>