0

angular.js を介して、2 つのレベルの json を div にバインドしようとしています。最初のレベルは期待どおりにバインドされていますが、2 番目のレベルはバインドされていません。次のサンプルhttp://plnkr.co/edit/iV72hp6nQMUQh1K082Ej内のバインディングを何に変更すればよいか提案してください。バインディングをネストできないようです。

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 に答える