0

I am trying to bind json with two levels to a div via angular.js. The first level is bound as expected but the second one is not. Could you please suggest to what should I change the binding inside the following sample http://plnkr.co/edit/iV72hp6nQMUQh1K082Ej it seems the binding is unable to be nested.

4

1 回答 1

0

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

<!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>
于 2013-04-24T13:40:14.670 回答