Angularjs - 採用NG-重複

Question

這裏渲染複雜的對象是我的榜樣data從服務器：

{ 
    "name": [ 
     "01.Song name ", 
     "02 .Song name " 
    ], 
    "url": [ 
     "1.url", 
     "2. url" 

    ] 
} 

這裏是控制器：

hiren.controller('hirenz' , function($scope , $http , $location , $routeParams){ 
    $http.post((rootURL + "music") , {'alpha' : $routeParams.alpha , 'name' : $routeParams.name , 
     'album' : $routeParams.albumname }).success(function(data){ 
     $scope.groups= data ; 

    }); 
// some other code 
}); 

和不工作的部分：

<table class="table" > 
    <tr> 
     <th>Select Song</th> 
    </tr> 
<tr ng-repeat="x in groups" > 
    <td> 
     <a ng-click="x.url" class="button "> 
      <span class="glyphicon glyphicon-user"> {{ x.names }}</span> 
     </a> 
    </td> 
</tr> 
</table> 

我的問題是我如何重複和渲染URL和名稱ng-click="" a nd {{ names }}？

Answer 1

問題出在數據上。如果數據沒有被使用字符串的兩個平行排列，但是對象的單個陣列，而不是它會容易得多：

[ 
    { 
     "name": "01. song name", 
     "url": "01. url" 
    }, 
    { 
     "name": "02. song name", 
     "url": "02. url" 
    } 
] 

這樣的話，你可以很容易地通過這個數組使用NG-重複循環，並在每次迭代，顯示歌曲名稱和歌曲網址。

如果您無法更改來自服務器的數據，請在您的控制器中更改它並在$ scope中公開已轉換的數據，而不是直接暴露來自服務器的數據。

Answer 2

喜歡的東西

<tr ng-repeat="url in groups.url" > 
    <td> 
     <a ng-click="url" class="button "> 
      <span class="glyphicon glyphicon-user"> {{ groups.names[$index] }}</span> 
     </a> 
    </td> 
</tr>