AngularJS

Question

我有 2 个列表（persons 和 animals）与 ng-repeat 一起显示。我想将这两个列表显示在一个带有标题的 table 中。这是我要如何显示数据的示例。我已经用 ng-show="$first" 试过了，但这不是我想要达到的结果。

<thead>
 <tr>
  <th>ID</th>
  <th>BIRTHDAY</th>
  <th>NAME</th>
 </tr>
</thead>

<tbody>
 <tr ng-repeat="ps in $ctrl.persons" ng-if="$ctrl.valuePersons == true">
  <th ng-show="$first">PERSONS</th>
   <td>{{ ps.id }}</td>
   <td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
   <td>{{ ps.name }}</td>
 </tr>
 
 <tr ng-repeat="an in $ctrl.animals" ng-if="$ctrl.valueAnimals == true">
  <th ng-show="$first">ANIMALS</th>
   <td>{{ an.id }}</td>
   <td>{{ an.birthday | date: 'dd.MM.yyyy'}}</td>
   <td>{{ an.name }}</td>
 </tr>
<tbody>

Answer 1

这篇文章很长，但可以帮助你...

<table>
  <tr>
   <th>ID</th>
   <th>BirthDay</th>
   <th>NAME</th>
  </tr>
   <tr>
    <td>Persons</td>
    <td></td>
    <td></td>
   </tr>
   <tr ng-repeat="ps in $ctrl.persons">
     <td>{{ps.id}}<td/>
     <td>{{ps.bday}}<td/>
     <td>{{ps.name}}<td/>
   </tr>
<tr>
    <td>Animals</td>
    <td></td>
    <td></td>
 </tr>
   <tr ng-repeat="ps in $ctrl.animals">
     <td>{{ps.id}}<td/>
     <td>{{ps.bday}}<td/>
     <td>{{ps.name}}<td/>
   </tr>

</table>

Answer 2

根据 ng-repeat 的文档，这将起作用。

...
<tr ng-repeat-start="ps in $ctrl.persons" ng-if="$ctrl.valuePersons == true && $first">
    <th>PERSONS</th>
    <td></td>
    <td></td>
</tr>
<tr ng-repeat-end ng-if="$ctrl.valuePersons == true && !$first">
    <td>{{ ps.id }}</td>
    <td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
    <td>{{ ps.name }}</td>
</tr>
...

Answer 3

var app = angular.module("Profile", [] );
                app.controller("ProfileCtrl", function($scope) {
                        $scope.items    = [{'title':'PERSON','data':[{'birth_day':'1/1/2011','name':'a1'},{'birth_day':'1/1/2011','name':'a2'},{'birth_day':'1/1/2011','name':'a3'}]},{'title':'ANIMALS','data':[{'birth_day':'1/1/2011','name':'a1'},{'birth_day':'1/1/2011','name':'a2'},{'birth_day':'1/1/2011','name':'a3'}]}]
                })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
                <table class="table" border="1">
                        <thead>
                                <tr>
                                        <th>ID</th>
                                        <th>BIRTHDAY</th>
                                        <th>Name</thu>
                                </tr>
                        </thead>
                        <tbody>
                                <tr ng-repeat-start="item in items" ng-init="main_ind= $index">
                                        <td  colspan="3">{{item['title']}}</td>
                                </tr>
                                <tr ng-repeat-end ng-repeat="val in item['data']">
                                        <td>{{$index+1}}</td>
                                        <td>{{val['birth_day']}}</td>
                                        <td>{{val['name']}}</td>
                                </tr>
                        </tbody>
                </table>
        </body>

AngularJS - ng-repeat 显示 header 一次

AngularJS - ng-repeat show header just once

javascript

angularjs-ng-repeat