CODEWITHSUNDEEP
javascripthtmlangularjsangular-controllerangularjs-ng-href
John R.
John R.

Reputation: 420

How to pass a parameter in AngularJS

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>

Upvotes: 1

Views: 75

Answers (2)

Abdo-Host
Abdo-Host

Reputation: 4103

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

Upvotes: 1

tmcc
tmcc

Reputation: 1020

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

Upvotes: 1

Related Questions