Javascript 通过angularjs绑定分层json_Javascript_Binding_Angularjs

Javascript 通过angularjs绑定分层json

javascript binding angularjs

Javascript 通过angularjs绑定分层json,javascript,binding,angularjs,Javascript,Binding,Angularjs,我试图通过angular.js将两个级别的json绑定到一个div。第一个级别按预期绑定，但第二个级别未按预期绑定。您能建议我如何更改以下示例中的绑定吗？绑定似乎无法嵌套。我修改了您的代码，如下所示，它正在工作 <!DOCTYPE html> <html ng-app> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script

我试图通过angular.js将两个级别的json绑定到一个div。第一个级别按预期绑定，但第二个级别未按预期绑定。您能建议我如何更改以下示例中的绑定吗？绑定似乎无法嵌套。

我修改了您的代码，如下所示，它正在工作

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


mHeader先生
{
背景色：黑色；
颜色：橙色；
宽度：200px；
垫底：0px；
边缘底部：0px；
}
函数会议SCTRL（$scope，$compile）{
$scope.itemselected=“无”；
$scope.meetings=[
{
国家：'南非'，
儿童：[
{name:“H1”}，
{name:“H2”}
]
},
{
国家：'大不列颠'，
儿童：[{姓名：“H3”}，
{名称：“H4”}]
},
{
国家：'美国'，
儿童：[{姓名：“H5”}，
{名称：“H6”}]
},
{
国家：“津巴布韦”，
儿童：[{姓名：“H7”}，
{名称：“H8”}]
}
];
$（'#div1'）.html(
$compile(
“{{meeting.country}{{{child.name}}”
)（$scope）
);
$（'#div1'）。prepend（'Race cources'）；
}