使用 ng-repeat 获取对象时遇到问题

Question

我在使用 Angular 进行 ng-repeat 时遇到了困难。

我的 JSON 数据如下所示

{
    "shows": {
        "stations": {
            "balaton": [{
                "name": "Minimal",
                "artist": "Sven Tasnadi",
                "duration" : "1H"
            }, {
                "name": "Forest of Love",
                "artist": "Bas Ibelini",
                "duration" : "2H"
            }, {
                "name": "Sound of Underground",
                "artist": "Potential Badboy",
                "duration" : "2H30"
            }],
            "djradio": [{
                "name": "Strickly Electronica",
                "artist": "Culptrate",
                "duration" : "1H"
            }, {
                "name": "Sound of Underground",
                "artist": "Potential Badboy",
                "duration" : "2H"
            }, {
                "name": "Sound Time",
                "artist": "Leona Graham",
                "duration" : "2H30"
            }]
        }
    }
}

在我的控制器中，我将对象设置为范围。

$http.get('json/show-schedule.json').success(function(res){
     $scope.schedule = res.shows.stations;
});

在我的 HTML 中，

<div class="schedule-station" ng-repeat="item in schedule">
     <div class="schedule-station-logo" style="background-image:url('img/stations/{{balaton}}.png')"></div>
     <ul>  
         <li class="schedule-duration-{{item.duration}}">
            <span class="schedule-time">11PM</span>
            <span>{{item.name}}</span>
            <i><span>{{item.artist}}</span></i>
         </li>                         
     </ul>
</div>

基本上，我有一个 DIV，需要根据 JSON 中有多少站来创建。然后，我需要获取电台名称，即“Balaton”和“DJRADIO”，这应该放在我的背景图像中，例如balaton.png。

然后，应根据该特定站点中的轨道数重复列表项。

我很难弄清楚如何做到这一点，而且我的尝试显然还有很长的路要走。

Answer 1

试试这样的：

<div class="schedule-station" ng-repeat="(station, tracks) in schedule">
     <h2>{{station}}</h2>
     <div class="schedule-station-logo" style="background-image:url('img/stations/{{station}}.png')"></div>
     <ul>  
         <li ng-repeat="track in tracks" class="schedule-duration-{{item.duration}}">
            <span class="schedule-time">11PM</span>
            <span>{{track.name}}</span>
            <i><span>{{track.artist}}</span></i>
            <b>{{track.duration}}</b>
         </li>                         
     </ul>    
</div>

Check the demo fiddle

Answer 2

所以这里有几点需要考虑：

1) 你有一个包含电台的对象，它是一个键值，一组项目，其中电台属性的值是歌曲的数组。如果站是一个数组，那么你可以做类似stations.length之类的东西，但是因为它是一组对象属性，我们需要手动计算它们，因此需要使用angular.forEach。

$scope.schedule = data.shows.stations;

$scope.stationCount = 0;

angular.forEach($scope.schedule, function(station){
  $scope.stationCount++;  
});

2) 要放置每首歌曲，我们必须嵌套另一个 ng-repeat 以便我们可以遍历数组中的每首歌曲。

3) 外部的 ng-repeat 必须设置为一个对象，而不是一个数组，就像您在原始 html 中所做的那样。

我做了一个 plnkr 展示如何为你做所有事情：http://plnkr.co/edit/ca8WxSEvn00rYVfwN82r?p=preview

Answer 3

见ngRepeat documentation

可以让 ngRepeat 迭代一个 使用以下语法的对象：<div ng-repeat="(key, value) in myObj"> ... </div>

---

所以你应该能够像这样迭代你的集合：

<div class="schedule-station" ng-repeat="(stationName, songs) in schedule">
    <div class="schedule-station-logo" style="background-image:url('img/stations/{{stationName}}.ng')"></div>
    <ul>
        <li ng-repeat="item in songs" class="schedule-duration-{{item.duration}}">
           <span class="schedule-time">11PM</span>
           <span>{{item.name}}</span>
           <i><span>{{item.artist}}</span></i>
        </li>
    </ul>
</div>