Question

我知道有很多关于这个问题的问题。我只是非常困惑。我做了我的研究并尝试了一些来自不同人的解决方案。我只是没有把头缠在这上面。请帮忙。

我有一个看起来像这样的传入数组。

正如您所见，索引4的对象具有文档数组2。

我基本上想在我的表格中（在文档列下）预设这个（文档），用逗号隔开另一个（不一定是逗号，只要它对用户有清晰的视图）。 / p>

表格如下所示。

        <div class="table-responsive">
        <table class="table table-bordered" >
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Documents</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="item in allItems | orderBy:sortKey:reverse | filter: search.query | itemsPerPage : itemPerPage" total-items="totalItems" current-page="currentPage">

                    <td>{{item.name}}</td>
                    <td>{{item.description}}</td>
                    <td>{{item.documents.name}}</td> // this obviously will not work 
                    <td style="width:150px">
                        <button class="btn btn-info btn-sm" ng-click="showEditDialog($event, item)">
                            <i class="glyphicon glyphicon-edit"></i>
                        </button>
                        <button class="btn btn-danger btn-sm" ng-click="deleteResource(item, $index)">
                            <i class="glyphicon glyphicon-trash"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="20" class="text-center">
                        <div ng-hide="allItems.length">
                            There are no data available
                        </div>
                        <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" boundary-links="true"></dir-pagination-controls>
                        <md-progress-circular md-mode="indeterminate" ng-if="AjaxInProgress"></md-progress-circular>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>

我尝试了

的解决方案

nested table using ng-repeat

Accessing the nested Arrays using ng-repeat in angularjs

和许多其他解决方案在线，但仍然无法让这个工作得到清醒。

Answer 1

你应该尝试这样的事情：

<div class="table-responsive">
    <table class="table table-bordered" >
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Documents</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr dir-paginate="item in allItems | orderBy:sortKey:reverse | filter: search.query | itemsPerPage : itemPerPage" total-items="totalItems" current-page="currentPage">

                <td>{{item.name}}</td>
                <td>{{item.description}}</td>
                <td>
                    <span ng-repeat="document in item.documents">
                        {{document.name}}<span ng-if="!$last">,</span>
                    <span>
                </td> // this obviously will not work 
                <td style="width:150px">
                    <button class="btn btn-info btn-sm" ng-click="showEditDialog($event, item)">
                        <i class="glyphicon glyphicon-edit"></i>
                    </button>
                    <button class="btn btn-danger btn-sm" ng-click="deleteResource(item, $index)">
                        <i class="glyphicon glyphicon-trash"></i>
                    </button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="20" class="text-center">
                    <div ng-hide="allItems.length">
                        There are no data available
                    </div>
                    <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" boundary-links="true"></dir-pagination-controls>
                    <md-progress-circular md-mode="indeterminate" ng-if="AjaxInProgress"></md-progress-circular>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

Answer 2

嵌套的ng-repeat可以像这样实现：

<强> HTML ：

<input type="text" ng-model="search">
<ul ng-repeat="oneauth in authorisations">
   <li>{{oneauth.name}}</li>
   <b>Nested ng-repeat</b>
    <li ng-repeat="entry in oneauth.authorisations | nameFilter:search">{{entry.auth.name}}</li>
</ul>

<强> JAVASCRIPT ：

var app = angular.module('myapp', [], function () {});

app.controller('AppController', function ($scope) {    
    $scope.authorisations = [{
      name:"one",
        "authorisations":[
        {
            "auth":{
                "number":"453",
                "name":"Apple Inc."
            }
        },
        {
            "auth":{
                "number":"123",
                "name":"Microsoft Inc."
             }
        }]
    },{
      name:"two",
        "authorisations":[
        {
            "auth":{
                "number":"453",
                "name":"Nokia Inc."
            }
        },
        {
            "auth":{
                "number":"123",
                "name":"Samsung Inc."
             }
        }]
    }];
});

app.filter('nameFilter', function(){
    return function(objects, criteria){
        var filterResult = new Array();
        if(!criteria)
            return objects;

        for(index in objects) {
            if(objects[index].auth.name.indexOf(criteria) != -1) // filter by name only
                filterResult.push(objects[index]);
        }
        console.log(filterResult);
        return filterResult;  
    }    
});

Working example

Answer 3

试试这个，

替换此

      <td>{{item.name}}</td>
      <td>{{item.description}}</td>
      <td>{{item.documents.name}}</td>

使用

      <td>{{item.name}}</td>
      <td>{{item.description}}</td>
      <td><span ng-repeat='document in item.documents'>{{document .name}},<span></td>

在html表中重复嵌套数组

3 个答案: