Question

我是Angular的新手，但希望有人可以提供帮助。

在ng-repeat内部，我想显示名称，然后在它下面列出每个专辑标题，然后为第二个名称做同样的事情。但它显示的名称是它下面的所有专辑。我怎么把这一切联系在一起呢？

我在这里有一个傻瓜http://plnkr.co/edit/4h0xbmNXrgqJYWflXWQk?p=preview

我有一个看起来像这样的json文件......

sample.json

{
  "artists": [
    {
      "name": "artist1name",
      "albums": [
        {
          "title": "titlealbum1"

        },
        {
          "title": "titlealbum2"
        },
        {
          "title": "titlealbum3"
        }
      ]
    },
    {
      "name": "artist2name",
      "albums": [
        {
          "title": "title2album1"

        },
        {
          "title": "title2album2"
        },
        {
          "title": "title2album3"
        }
      ]
    }
  ]
}

然后html页面看起来像这样。

<body ng-app="list">

  <div ng-controller="ListCtrl">
      <ul>
          <li ng-repeat="artist in artists">
            <strong> {{artist.name}}</strong>
            <ul ng-repeat="artist in artists" ng-show="isVisible(artist.name)">
              <li ng-repeat="album in artist.albums">{{album.title}}</li>
            </ul>
          </li>
      </ul>
  </div>

  <script>
  angular.module('list', []);
    function ListCtrl($scope, $http) {
      $http({method: 'GET', url: 'sample.json'}).success(function(data) {
          $scope.artists = [];
          angular.forEach(data.artists, function(value, key) {
              $scope.artists.push(value);
          });
          $scope.isVisible = function(name){
              return true;// return false to hide this artist's albums
          };
        });
    }
  </script>

</body>

Answer 1

您可以将ng-repeat-start与ng-repeat-end一起使用。它是非常智能的指令，它使您能够在相同的DOM级别添加更多元素。

  <ul>
      <li ng-repeat-start="artist in artists">
        <strong> {{artist.name}}</strong>
      </li>
      <li ng-repeat-end ng-repeat="album in artist.albums">{{album.title}}</li>
  </ul>

这是固定的plnkr：http://plnkr.co/edit/oLVVX3dqvhqgPhZWPuPg?p=preview

AngularJS中的嵌套JSON

1 个答案: