How to pass a parameter in AngularJS

Question

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>

Abdo-Host · Accepted Answer · 2020-08-12 23:45:36Z

<!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>

tmcc · Accepted Answer · 2020-08-12 23:37:50Z

1

I would suggest finding a unique value from the data, most data sets have an id for this kind of situation. Then you can use Javascript find to retrieve the entry object you want to display. Your url could look like #!Laptop or #1?title=Laptop

$scope.foundEntry = $scope.entries.find(function(listEntry) {
   // find the entry from entries that has the matching title
   return listEntry.title === decodeURI($scope.selectedValue);
});

JS Fiddle for working example

answered Aug 12, 2020 at 23:37

tmcc

1,0208 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to pass a parameter in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related