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>

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

然后应根据该特定电台中的曲目数重复列表项。

我很难搞清楚如何做到这一点，我的尝试显然已经过时了。

Answer 1

请参阅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>

Answer 2

所以这里有一些事情需要考虑：

1）你有一个包含电台的对象，它是一个关键的val项目集合，其中station属性的值是歌曲的数组。如果工作站是一个数组，那么你可以做一些像stations.length，但因为它是一组对象属性，我们需要手动计算它们，因此angular.forEach。

$scope.schedule = data.shows.stations;

$scope.stationCount = 0;

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

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

3）必须在原始html中为对象而不是数组设置外部的ng-repeat。

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

Answer 3

尝试这样的事情：

<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

无法使用ng-repeat获取对象

3 个答案: