Таблица без использования начальной загрузки в AngularJS - PullRequest
0 голосов
/ 04 апреля 2019

Это мой угловой код JS

 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" }]
    });

хочу обойтись без бутстрапа

1 Ответ

1 голос
/ 04 апреля 2019

Вы можете использовать ng-repeat для создания таблицы в angularjs.Затем вы можете оформить таблицу в соответствии с вашими требованиями, используя css, если вы не хотите использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...