angularjs - 我如何将列表传递给其他 html？答案

【问题标题】：angularjs - how do i pass list to other html?angularjs - 我如何将列表传递给其他 html？
【发布时间】：2025-11-26 11:00:02
【问题描述】：

这是 index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>index</title>
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="icon" href="data:;base64,=">
        <style>
        </style>

</head>

<body>
        <ul class="papa">

                <li><a href="/1_input">input</a></li>
                <li><a href="/2_output">output</a></li>
        </ul>

        <ng-view></ng-view>

        <script>

                var app1 = angular.module('myApp', ['ngRoute']);
                app1.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {
                        $routeProvider
                        .when('/1_input', {
                          controller: 'input_control',
                          templateUrl: '/1_input.html'
                   })
                        .when('/2_output/:firstnamehh/:lastnamehh', {
                          controller: 'output_control',
                          templateUrl: '/2_output.html'
                        })
                        .otherwise({redirectTo:'/1_input'});

                        $locationProvider.html5Mode({ enabled: true, requireBase: false });
                }]);

                app1.controller('input_control',function($scope, $location){
                        //$scope.init_table = {name1:"", name2:""};
                        //$scope.score_card = [];
                        //
                        $scope.loadView2 = function(){
                                // $scope.score_card.push({
                                //          name1: $scope.firstnamehh,
                                //          name2: $scope.lastnamehh
                                // })
                                // console.log($scope.score_card);
              $location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
                        //$location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
                        //$location.path('/2_output/'+$scope.score_card;
                        //$location.path('/2_output/'+$scope.firstnamehh+$scope.lastnamehh+$scope.score_card);
                        //$location.path('/2_output/'+$scope.score_card);
            }
                });

                app1.controller('output_control',function($scope, $routeParams){
                         $scope.name1=$routeParams.firstnamehh;
                         $scope.name2=$routeParams.lastnamehh;
                         //$scope.name2=$routeParams.({?name1=$scope.firstnamehh});
                         //$scope.out_score=$routeParams.score_card;
                         //$scope.name3 = $routeParams[score_card];
                });

        </script>
</body>
</html>

这是 1_input.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>1_input</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
        First name: <input type="text" ng-model="firstnamehh"/> <br/>
        Last name: <input type="text" ng-model="lastnamehh"/> <br/>
        <button ng-click="loadView2()">to output page</button>
</body>
</html>

这是 2_output.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2_output</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
    From View2.
    <ul>
        <li>{{name1}}</li>
        <li>{{name2}}</li>
        <!-- <tr ng-repeat="aa in score_card">
            <td>{{aa.name1}}</td>
            <td>{{aa.name2}}</td>
        </tr> -->
    </ul>
</body>
</html>

大家好，我是 angularjs 新手，正在寻求帮助！我正在尝试的是，将 firstnamehh 和 lastnamehh 作为列表并将其传递给 2_output.html 并最终在表格中打印出来。我正在努力的部分是我应该在 $routeParams 和 $location.path() 之后放置什么。

$routeParams.???

$location.path('/2_output/'+$scope.???);

任何建议将不胜感激！感谢您阅读此问题

【问题讨论】：

标签： javascript angularjs list routeparams

【解决方案1】：

您可以通过使用服务来实现这一点

app.factory('DataService', function() {
    var appData = {}

    function set(data) {
        appData = data;
    }

    function get() {
        return appData;
    }

    return {
        set: set,
        get: get
    }

}

在您的 input_control 中，您可以将数据设置为服务：

DataService.set(shredData);

在你的 output_control 从服务中获取数据：

$scope.appdata = DataService.get();

通过将DataService作为参数传递到控制器中

app.controller('input_control', ['DataService', function($scope, $location, DataService){
      //Your logic  
}]);

【讨论】：

谢谢！！虽然我仍在做我想做的事情，但你的回答给了我很好的线索，我应该做什么！