Table without using bootstrap in AngularJS

Question

This is my angular js code

 var app = angular.module('DemoApp', []);
    app.controller('DemoController', function ($scope) {
    $scope.name = [
        { Country: "India", Capital: "New Delhi" },
        { Country: "China", Capital: "Beijing" },
        { Country: "Japan", Capital: "Tokyo" },
        { Country: "France", Capital: "Paris" },
        { Country: "Russia", Capital: "Moscow" },
        { Country: "Nepal", Capital: "Kathmandu" },
        { Country: "England", Capital: "London" },
        { Country: "Belgium", Capital: "Brussels" },
        { Country: "Greece", Capital: "Athens" },
        { Country: "Portugal", Capital: "Lisbon" }]
    });

I want to do without bootstrap

Is the below code what you are looking for? @Akansha

Vivz
– Vivz

2019-04-13 17:09:41 +00:00
Commented Apr 13, 2019 at 17:09 — Vivz
– Vivz, Commented Apr 13, 2019 at 17:09

Vivz · Accepted Answer · 2019-04-04 11:13:38Z

You can use a ng-repeat to create a table in angularjs. You can then style your table according to your requirements using css if you don't want to use bootstrap.

 
 var app = angular.module('DemoApp', []);
    app.controller('DemoController', function ($scope) {
    $scope.countries = [
        { Country: "India", Capital: "New Delhi" },
        { Country: "China", Capital: "Beijing" },
        { Country: "Japan", Capital: "Tokyo" },
        { Country: "France", Capital: "Paris" },
        { Country: "Russia", Capital: "Moscow" },
        { Country: "Nepal", Capital: "Kathmandu" },
        { Country: "England", Capital: "London" },
        { Country: "Belgium", Capital: "Brussels" },
        { Country: "Greece", Capital: "Athens" },
        { Country: "Portugal", Capital: "Lisbon" }]
    });

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
    <title>Table</title>
</head>
<div ng-app="DemoApp" ng-controller="DemoController"> 

<table>
<tr><th>{{ Country}}</th>
    <th>{{ Capital }}</th></tr>
  <tr ng-repeat="x in countries">
    <td>{{ x.Country }}</td>
    <td>{{ x.Capital }}</td>
  </tr>
</table>

</div>

Collectives™ on Stack Overflow

Table without using bootstrap in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related