<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
angular.module("myApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.products = [
{name: "Apples", category: "Fruit", price: 1.20, expiry: 10},
{name: "Bananas", category: "Fruit", price: 2.42, expiry: 7},
{name: "Pears", category: "Fruit", price: 2.02, expiry: 6}
];
}).directive('unorderedList', function () {
return {
link: function (scope, element, attribute) {
scope.data = scope[attribute["unorderedList"]];
},
restrict: 'A',
template: "<ul><li ng-repeat='item in data'> {{item.name}} --- {{item.category}} --- {{item.price | currency}} --- {{item.expiry}}</li></ul>"
}
})
;
</script>
</head>
<body ng-controller="defaultCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Products</h3>
</div>
<div class="panel-body">
<div unordered-list="products"></div>
</div>
</div>
</body>
</html>
Hi. I created an unordered list but I want to add the title for the columns. And it should be seen as a table like name, category, price, and expiry. Any help, please?
For table structure :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
angular.module("myApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.products = [
{name: "Apples", category: "Fruit", price: 1.20, expiry: 10},
{name: "Bananas", category: "Fruit", price: 2.42, expiry: 7},
{name: "Pears", category: "Fruit", price: 2.02, expiry: 6}
];
}).directive('unorderedList', function () {
return {
link: function (scope, element, attribute) {
scope.data = scope[attribute["unorderedList"]];
},
restrict: 'A',
template ="<table><thread><tr>
<th><div>Name</div></th>
<th><div>Category</div></th>
<th><div>Price</div></th>
<th><div>Expiry</div></th>
</tr> </thread>
<tbody>
<tr ng-repeat='item in data'>
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry}}</td>
</tr>
</tbody>
</table>"template:"template="<table><thread><tr><th><div>Name</div></th><th><div>Category</div></th><th><div>Price</div></th><th><div>Expiry</div></th>
</tr> </thread>
<tbody>
<tr ng-repeat='item in data'>
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry}}</td>
</tr>
</tbody>
</table>"
}
})
;
</script>
</head>
<body ng-controller="defaultCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Products</h3>
</div>
<div class="panel-body">
<div unordered-list="products"></div>
</div>
</div>
</body>
</html>