angularjs - how do i pass list to other html?

2019-09-15 18:44发布

站内文章 / JavaScript
29 0 0

问题:

this is the 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>

this is the 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>

this is the 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>

hello guys, i'm new to angularjs and looking for some help!. What I'm trying is, making firstnamehh and lastnamehh as a list and pass it to 2_output.html and finally print it out in a table. The part I'm struggling is what should i put after $routeParams and $location.path().

$routeParams.???

..

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

any advice would be appreciated!! thank you for reading this question

回答1:

You can achieve this by using service

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

    function set(data) {
        appData = data;
    }

    function get() {
        return appData;
    }

    return {
        set: set,
        get: get
    }

}

In your input_control you can set the data to the service :

DataService.set(shredData);

In your output_control get the data from ther service :

$scope.appdata = DataService.get();

Inject DataService in the controllers by passing it as a parameter

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


标签： javascript angularjs list routeparams
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~