CODEWITHSUNDEEP
angularjs
Akansha
Akansha

Reputation: 45

Table without using bootstrap in AngularJS

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

Upvotes: 0

Views: 59

Answers (1)

Vivz
Vivz

Reputation: 6630

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>

Upvotes: 1

Related Questions