Question

我有2个列表（persons和animals），我用ng-repeat显示。我想在一个带有标题的表中显示这两个列表。以下是我想要显示数据的示例。我已经尝试使用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

＆＃13;

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'}]}]
                })

＆＃13;

<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>

＆＃13;

AngularJS - ng-repeat只显示一次标题

3 个答案: