如何在AngularJS中传递参数答案

【问题标题】：How to pass a parameter in AngularJS如何在AngularJS中传递参数
【发布时间】：2023-04-06 02:02:01
【问题描述】：

我在 Angular JS 中有一个产品列表，当我单击某个项目的链接时，我想将该产品的索引发送到一个新页面，在该页面中获取该项目的所有详细信息（类别、价格等）基于项目索引。这些信息将取自已在 javascript 中定义的同一数组。你有什么建议吗？

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

【问题讨论】：

标签： javascript html angularjs angular-controller angularjs-ng-href

【解决方案1】：

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

【讨论】：

【解决方案2】：

我建议从数据中找到一个唯一值，大多数数据集都有适合这种情况的 id。然后您可以使用Javascript find 来检索您要显示的条目对象。您的网址可能类似于 #!Laptop 或 #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

【讨论】：