AngularJS Tables
-- Learning is not just about technology, but also about dreams!
Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks
AngularJS Tutorial
AngularJS Tutorial
AngularJS Introduction
AngularJS Expressions
AngularJS Directives
AngularJS Models
AngularJS Scope
AngularJS Controllers
AngularJS Filters
AngularJS Service
AngularJS Http
AngularJS Select
AngularJS Tables
AngularJS SQL
AngularJS HTML DOM
AngularJS Events
AngularJS Modules
AngularJS Forms
AngularJS Input Validation
AngularJS API
AngularJS Bootstrap
AngularJS Includes
AngularJS Animations
AngularJS Dependency Injection
AngularJS Routing
AngularJS Applications
AngularJS Examples
AngularJS Examples
AngularJS Reference Manual
AngularJS Reference Manual
AngularJS Select
AngularJS SQL
AngularJS Tables
The ng-repeat directive can perfectly display tables.
Displaying Data in Tables
Using Angular to display tables is very simple:
AngularJS Example
| {{ x.Name }} |
{{ x.Country }} |
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("/try/angularjs/data/Customers_JSON.php")
.then(function (result) {
$scope.names = result.data.records;
});
});
Try it »
Deprecation Notice (v1.5)
In v1.5, the success and error methods of $http are deprecated. Use the then method instead.
If you are using a version below v1.5, you can use the following code:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("/try/angularjs/data/Customers_JSON.php")
.success(function (response) {$scope.names = response.records;});
});
Customers_JSON.php file code:
<?php
echo <<
Using CSS Styles
To make the page more aesthetically pleasing, we can use CSS on the page:
CSS Styles
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
Try it »
Using the orderBy Filter
To display in sorted order, use the orderBy filter:
AngularJS Example
| {{ x.Name }} |
{{ x.Country }} |
Try it »
Using the uppercase Filter
Use the uppercase filter to convert to uppercase:
AngularJS Example
| {{ x.Name }} |
{{ x.Country | uppercase }} |
Try it »
Displaying Serial Numbers ($index)
To display serial numbers in a table, add $index in
:
AngularJS Example
| {{ $index + 1 }} |
{{ x.Name }} |
{{ x.Country }} |
Try it »
Using $even and $odd
AngularJS Example
| {{ x.Name }} |
{{ x.Name }} |
{{ x.Country }} |
{{ x.Country }} |
Try it »
AngularJS Select
AngularJS SQL
Byte Ark Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, etc., officially supplied, stable and reliable.
Configuration Guide
¥9.9
/ month
Activate Now
iFlytek Star Coding Plan
Includes free model call quotas for DeepSeek, GLM, Kimi, MiniMax, a one-stop experience and deployment platform.
Configuration Guide
¥3.9
/ month
Activate Now
3 Notes
Write Notes
Category Navigation
Python / Data Science
AI / Intelligent Development
Frontend Development
Backend Development
Databases
Mobile Development
DevOps / Engineering
Programming Languages
Computer Fundamentals
XML / Web Service
.NET
Website Construction
Advertisement
AngularJS Tutorial
AngularJS Tutorial
AngularJS Introduction
AngularJS Expressions
AngularJS Directives
AngularJS Models
AngularJS Scope
AngularJS Controllers
AngularJS Filters
AngularJS Service
AngularJS Http
AngularJS Select
AngularJS Tables
AngularJS SQL
AngularJS HTML DOM
AngularJS Events
AngularJS Modules
AngularJS Forms
AngularJS Input Validation
AngularJS API
AngularJS Bootstrap
AngularJS Includes
AngularJS Animations
AngularJS Dependency Injection
AngularJS Routing
AngularJS Applications
AngularJS Examples
AngularJS Examples
AngularJS Reference Manual
AngularJS Reference Manual
Online Examples
·HTML Examples
·CSS Examples
·JavaScript Examples
·Ajax Examples
·jQuery Examples
·XML Examples
·Java Examples
Character Sets & Tools
· HTML Character Set Settings
· HTML ASCII Character Set
· JS Obfuscation/Encryption
· PNG/JPEG Image Compression
· HTML Color Picker
· JSON Formatting Tool
· Random Number Generator
Latest Updates
· AI Agent
· AI Evaluation and Security Research
· AI System Architecture
· Cutting-edge Research Trends
· Advanced NLP Techniques
· Computer Vision AI
· Deep Learning Basics
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Mark Article
Browsing History
Clear All
No records
| 
YouTip