0

これは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.???);

アドバイスをいただければ幸いです!! この質問を読んでくれてありがとう

4

1 に答える 1

0

サービスを使用してこれを実現できます

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  
}]);
于 2016-11-19T08:29:03.287 に答える