如何处理 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()--> 将带来电影的详细信息（Cast 属性将在数组中包含男、女主角名称）。

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

我不确定你所说的 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>

Answer 2

But its not working....

因为根据发布的 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 的回答）。

如何处理 angular js/HTML 中的数组

How to handle array in angular js/HTML

html

javascript

model-view-controller

asp.net-web-api

angularjs