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

How to handle array in angular js/HTML

本文关键字：HTML 处理 数组 js angular      更新时间：2023-09-26

我使用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"
    ]
}

有人能帮忙吗？

但它不起作用。。。。

因为根据你收到的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的回答）。

我不确定你说的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>
相关文章：