AngularJS ngRepeat的一点说明

2016.5.24 - 南京 angularjs

angularjs的ng-repeat的默认生成格式是ng-repeat=”(key, value) in object”,它可以输出键值对,打印 key={{key}}, value={{value}},这是输出对象的,如果是输出单纯数组的,直接ng-repeat=”item in collection”,打印{{item}},如果输出对象数组的,也一样直接ng-repeat=”item in collection”,打印{{item.prop}}

JavaScript

$scope.data = {
  'id': 1,
  'project': 'equip2012',
  'date': '2012-02-26',
  'description': 'equip',
  'equip_no': 'e001',
};
var array = [];
for (var key in $scope.data) {
  var map = {};
  map[key] = $scope.data[key];
  array.push(map);
}
$scope.data = array;

HTML

<p ng-repeat="obj in data">
  <font ng-repeat="(key, value) in obj">
    {{key}} : {{value}}
  </font>
</p>

完整的小例子

<!DOCTYPE html>
<html ng-app>
<!-- www.java2s.com -->
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <ul>
      <li ng-repeat="(key, value) in school.sub">first language is = {{value}}</li>
    </ul>
  </div>
  <script type='text/javascript'>
    var myApp = angular.module('myApp', []);
    function MyCtrl($scope) {
      $scope.school = {
        name: 'A',
        sub: {
          firstlang: 'Java'
        }
      }
    }
  </script>
</body>
</html>

更新列表:

参考文章:

相关阅读