JavaScript — AngularJS в таблице HTML
Я хочу создать таблицу с продуктами в определенном меню магазина.
Таблица разделена по категориям (категориям товаров), и для каждой категории желаемые товары должны быть показаны под его категорией.
Что-то вроде:
Я могу получить различные категории в моем HTML, но когда я хочу использовать ng-repeat для строк таблицы или заголовков таблицы, я ничего не получаю …
<table class="table table-hover">
<tr>
<th colspan="5">Menu items</th>
</tr>
<tr ng-app="categories" ng-cloak="" ng-controller="category" ng-repeat= "c in categories">
<th>{{c[1]}}</th>
</tr>
AngularJS
categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
var serviceBase = 'api/';
$http.get(serviceBase + 'categories').then(function (results) {
$scope.categories = results.data;
for(var i = 0; i < $scope.categories.length; i++){
var categories = $scope.categories[i];
}
});
});
Что здесь не так?
Решение
Попробуйте следующий код:
categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
var serviceBase = 'api/';
$http.get(serviceBase + 'categories').then(function (results) {
var categorie = results.data;
for(var i = 0; i < categorie.length; i++){
$scope.categories = categorie[i];
}
});
});
Другие решения
Я нашел решение сам:
<table ng-app="categories" ng-cloak="" ng-controller="category">
<tr>
<th>Menu items</th>
</tr>
<tr ng-repeat= "c in categories">
<th>{{c[1]}}</th>
</tr>
Вы не должны иметь ng-repeat на вашем ng-app & ng-controller дела. Даже вам не нужно делать для цикла. У ваших категорий есть категория. Вы можете получить доступ к тем, кто внутри ng-repeat с помощью c Только нет необходимости указывать какой-либо индекс в нем.
наценка
<body class="table table-hover" ng-app="categories" ng-cloak="" ng-controller="category" >
<tr>
<th colspan="5">Menu items</th>
</tr>
<tr ng-repeat="c in categories">
<th>{{c}}</th>
</tr>
</table>
</body>