I have a list of products in Angular JS and when I click the link for a certain item I want to sent the index of that product to a new page where to get all the details for that item (category, price etc) base on the item index. The informations will be taken from the same array already defined in javascript. Do you have any sugestion?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="productsCtrl">
<ul id="products">
<li ng-repeat="entry in entries">
<a href="#!{{$index}}">{{entry.title}}</a>
<span ng-click="removeItem($index)" style="cursor: pointer;"
>x</span
>
</li>
</ul>
</div>
<script>
angular
.module("myApp", [])
.controller("productsCtrl", function($scope) {
$scope.entries = [
{
title: "Laptop",
category: "Category01",
price: 233
},
{
title: "Phone",
category: "Category02",
price: 122
},
{
title: "Mouse",
category: "Category03",
price: 10
}
];
$scope.removeItem = function(index) {
$scope.entries.splice(index, 1);
};
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous">
<body>
<div ng-app="myApp" ng-controller="productsCtrl" class="container p-3">
<ul class="list-group" id="products">
<li class="list-group-item">
<a class="font-weight-bold" href="#">Home</a>
</li>
<li class="list-group-item list-group-item-action" ng-repeat="entry in entries">
<a href="#!category/{{$index}}">{{entry.title}}</a>
<button ng-click="removeItem($index)" class="btn btn-sm font-weight-bold float-right btn-outline-danger">x</button>
</li>
</ul>
<ng-view></ng-view>
</div>
<script>
var app = angular.module("myApp", ['ngRoute']).controller("productsCtrl", function ($scope, $route, $routeParams) {
$scope.active_category = null;
if ($routeParams && $routeParams['index']) {
$scope.active_category = $scope.entries[$routeParams['index']];
}
$scope.entries = [
{
title: "Laptop",
category: "Category01",
price: 233
},
{
title: "Phone",
category: "Category02",
price: 122
},
{
title: "Mouse",
category: "Category03",
price: 10
}
];
$scope.removeItem = function (index) {
$scope.entries.splice(index, 1);
};
});
app.config(function ($routeProvider) {
$routeProvider
.when("/category/:index", {
template: `<div class="card mt-3" ng-if="active_category">
<div class="card-header">{{active_category.title}}</div>
<div class="card-body">
<ul>
<li><b>Category</b> : {{active_category.category}}</li>
<li><b>Price</b> : {{active_category.price}}</li>
</ul>
</div>
</div>`,
controller: "productsCtrl"
})
.otherwise({
redirectTo: '/'
});
});
</script>
</body>
</html>