如何在 Angular js/HTML 中处理数组

Question

我正在使用 Web API 通过 Angular 在 HTML 中显示值。

我有 4 个属性：Id、MovieName、Date 和 Cast。 Cast 是一个数组。我不知道如何处理 Cast 属性。

Controller.js

app.controller('MyController', function ($scope, MyService) {

$scope.getemploy = function () {
    var promise = MyService.getMovies();
    promise.then(function (pl) {
        $scope.Movies= pl.data
    },
    function (error) {
        $log.error('Some Prob', error);
    });
}

GetMovies()--> 将带来电影细节（演员属性将在数组中包含男性、女性主角姓名）。

HTML 文件：

 <tr ng-repeat="mov in Movies">
   <td>{{mov.Id}}</td>
   <td>{{mov.MovieName}}</td>
   <td>{{mov.Date}}</td>
   <td>{{mov.Cast}}</td>
 </tr>

但它不起作用。我想我需要一些其他方法来处理 Cast 属性，无论是 html 还是 angular。

我的 Json 输出供您参考：

[
{
    "_movieId": 1,
    "_moviename": "Olympus Has Fallen",
    "_releaseDate": 2013,
    "_cast": [
        "Gerard Butler",
        "Dylan McDermott",
        "Aaron Eckhart",
        "Angela Bassett"
    ]
}

有人可以帮忙吗？

Answer 1

但它不起作用....

因为根据您收到的发布的 JSON，HTML 应该具有不同的键。试试这个：

<tr ng-repeat="mov in Movies">
   <td>{{mov._movieId}}</td>
   <td>{{mov._moviename}}</td>
   <td>{{mov._releaseDate}}</td>
   <td>{{mov._cast.join(', ')}}</td>
 </tr>

我使用简单的join 数组方法来呈现以逗号分隔的演员列表。如果您需要更具体的内容，则需要在 mov._cast 数组上再使用一个 ngRepeat（请参阅 Danny 的回答）。

Answer 2

我不确定你所说的 Cast 不起作用是什么意思，但我猜它只是在 HTML 中显示 JSON 对象？您可以在列表中显示所有演员，执行以下操作：

<tr ng-repeat="mov in Movies">
   <td>{{mov.Id}}</td>
   <td>{{mov.MovieName}}</td>
   <td>{{mov.Date}}</td>
   <td>
       <ul>
           <li ng-repeat="member in mov.Cast">{{ member }}</li>
       </ul>
   </td>
 </tr>