通过 angularjs 绑定分层 json答案

【问题标题】：bind hierachical json via angularjs通过 angularjs 绑定分层 json
【发布时间】：2013-04-18 00:53:23
【问题描述】：

我正在尝试通过 angular.js 将具有两个级别的 json 绑定到 div。第一级按预期绑定，但第二级没有。您能否建议我应该更改以下示例中的绑定http://plnkr.co/edit/iV72hp6nQMUQh1K082Ej 似乎绑定无法嵌套。

【问题讨论】：

标签： javascript binding angularjs

【解决方案1】：

我修改了您的代码，如下所示，现在可以使用了

<!DOCTYPE html>
<html ng-app>
<head>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script src="app.js"></script>

  <style>
  .mHeader
  {
  background-color:Black;
  color: Orange;
  width: 200px;
  padding-bottom: 0px;  
  margin-bottom: 0px;
  }
  </style>
</head>
<body> 

<div ng-controller="MeetingsCtrl">
  <div id="div1" style="background-color: Brown; width: 200px;">

  </div>

    <script>
        function MeetingsCtrl($scope, $compile) {
            $scope.itemselected = "None";
            $scope.meetings = [
              {
                  country: 'South Africa',
                  children: [
                      {name: "H1"},
                      { name: "H2" }
                  ]
              },
              {
                  country: 'Great Britain',
                  children: [{ name: "H3" },
                      { name: "H4" }]
              },
              {
                  country: 'United States',
                  children: [{ name: "H5" },
                      { name: "H6" }]
              },
              {
                  country: 'Zimbabwe',
                  children: [{ name: "H7" },
                      { name: "H8" }]
              }
            ];

            $('#div1').html(
       $compile(
         '<ul><li ng-repeat="meeting in meetings"><a>{{meeting.country}}</a> <ul><li ng-repeat="child in meeting.children">{{child.name}}</li></ul></li></ul>'
       )($scope)
     );
            $('#div1').prepend('<div class="mHeader">Race cources</div>');

        }

    </script>
</body>
</html>

【讨论】：