Display header only once with AngularJS ng-repeat

Question

Display header only once with AngularJS ng-repeat

I have two lists, namely the persons and animals, which I am displaying using ng-repeat. My goal is to present these two lists in a single table with a heading. Below is an example of how I envision presenting the data. I have attempted to achieve this using ng-show="$first", but the outcome did not meet my expectations.

https://i.sstatic.net/zGZYo.png

ID	BIRTHDAY	NAME
PERSONS	{{ ps.id }}	{{ ps.birthday \| date: 'dd.MM.yyyy'}}	{{ ps.name }}
ANIMALS	{{ an.id }}	{{ an.birthday \| date: 'dd.MM.yyyy'}}	{{ an.name }}

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

According to the official ng-repeat documentation, this solution should be effective.

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

According to the official ng-repeat documentation, this solution should be effective.

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

Answer №2

Here's a detailed solution for you...

<table>
  <tr>
   <th>ID Number</th>
   <th>Date of Birth</th>
   <th>Full Name</th>
  </tr>
   <tr>
    <td>Individuals</td>
    <td></td>
    <td></td>
   </tr>
   <tr ng-repeat="person in $ctrl.people">
     <td>{{person.id}}<td/>
     <td>{{person.dob}}<td/>
     <td>{{person.name}}<td/>
   </tr>
<tr>
    <td>Creatures</td>
    <td></td>
    <td></td>
 </tr>
   <tr ng-repeat="animal in $ctrl.zooAnimals">
     <td>{{animal.id}}<td/>
     <td>{{animal.birthdate}}<td/>
     <td>{{animal.species}}<td/>
   </tr>

</table>

Answer 4

Here's a detailed solution for you...

<table>
  <tr>
   <th>ID Number</th>
   <th>Date of Birth</th>
   <th>Full Name</th>
  </tr>
   <tr>
    <td>Individuals</td>
    <td></td>
    <td></td>
   </tr>
   <tr ng-repeat="person in $ctrl.people">
     <td>{{person.id}}<td/>
     <td>{{person.dob}}<td/>
     <td>{{person.name}}<td/>
   </tr>
<tr>
    <td>Creatures</td>
    <td></td>
    <td></td>
 </tr>
   <tr ng-repeat="animal in $ctrl.zooAnimals">
     <td>{{animal.id}}<td/>
     <td>{{animal.birthdate}}<td/>
     <td>{{animal.species}}<td/>
   </tr>

</table>

Answer 5

Answer №3

let profileApp = angular.module("MyProfile", [] );
                profileApp.controller("MyProfileCtrl", 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="MyProfile" ng-controller="MyProfileCtrl">
                <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>

Answer 6

let profileApp = angular.module("MyProfile", [] );
                profileApp.controller("MyProfileCtrl", 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="MyProfile" ng-controller="MyProfileCtrl">
                <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>

Display header only once with AngularJS ng-repeat

Answer №1

Answer №2

Answer №3

Similar questions

How to efficiently handle callbacks with Angular Services for asynchronous HttpRequests?

Dynamic change of table cell text color based on condition utilizing ng-if and ng-style

Avoiding 0 being mistakenly interpreted as undefined while utilizing React Conditional Rendering

When a specific condition is met, Jquery can automatically execute a function contained

Executing the .click() function of jQuery within a loop

Struggling to achieve desired output from function in NextJS

Modifying canvas border colors using AngularJS

Enhanced jQuery Embed Code validation for user input using a textarea

Building a custom login page with axios in a react-redux application

Trouble arises when integrating jQuery with PHP

JavaScript consistently returns HiddenField as NULL

Guide to designing a unique shape in JointJs by combining multiple basic shapes together

Can a frontend framework be exclusively utilized on a single page within a completed project?

Issue with moving files after successful upload - encountering ENOENT Error

I encountered a RangeError with code [ERR_HTTP_INVALID_STATUS_CODE] due to an invalid status code being undefined

Utilizing the hint operator in strongloop loopback with mongoDB: A step-by-step guide

Verify the token to reset the password using Next.js

Setting up KaTeX integration (code injection) on Circle.so

Using the "export default" feature in React.js is a

Issues encountered while optimizing JSON file in a ReactJS program