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>