使用ng-repeat無法獲取對象

我在使用Angular進行ng-repeat時遇到困難。使用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。

然後根據該特定電臺中有多少軌道重複列表項目。

我很難搞清楚如何做到這一點，而我的嘗試顯然是失敗的。

來源

2015-05-23 anon

嘗試是這樣的：

<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

來源

2015-05-23 19:08:46 manzapanza

見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>

來源

2015-05-23 18:55:01

是的，我曾嘗試這讓車站的名字，但我在每個單獨的歌曲的列表項目上進行ng-repeat時遇到問題 – anon

@anon請參閱編輯的答案 –

所以這裏有幾件事情需要考慮：

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-重複這樣我們就可以遍歷每首歌曲在數組中。

3）外部ng-repeat必須設置爲一個對象，而不是一個數組，因爲你有你的原始HTML。

我做了演示如何爲你做一切plnkr：http://plnkr.co/edit/ca8WxSEvn00rYVfwN82r?p=preview

來源

2015-05-23 19:06:40 SB2017

使用ng-repeat無法獲取對象

回答

相關問題