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>

我的问题是如何在ng-click=""和{{ names }}中重复和呈现网址和名称？

Answer 1

问题在于数据。如果数据不是使用两个并行的字符串数组，而是使用单个对象数组，则会更容易：

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

这样，您可以轻松地使用ng-repeat来遍历此数组，并在每次迭代时显示歌曲名称和歌曲网址。

如果您无法更改来自服务器的数据，请在控制器中更改它并在$ 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>

Angularjs - 使用ng-repeat渲染复杂对象

2 个答案: