2016-11-19 2 views
0

これはindex.htmlをangularjs - どのように他の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> 

これはこれは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> 

こんにちはみんなで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> 

で、私はangularjsに新たなんだですいくつかの助けを捜す!私がしようとしているのは、firstnamehhとlastnamehhをリストにして2_output.htmlに渡し、最後にそれをテーブルに出力することです。私が苦労している部分は、$ routeParamsと$ location.path()の後に置かなければならないものです。

$routeParams.??? 

..

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

何かアドバイスをいただければ幸いです!あなたがサービスにデータを設定することができ、あなたのinput_controlでサービス

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

    function set(data) { 
     appData = data; 
    } 

    function get() { 
     return appData; 
    } 

    return { 
     set: set, 
     get: get 
    } 

} 

を使用することによって、これを達成することができ、この質問

答えて

0

を読んでいただきありがとうございます:

DataService.set(shredData); 

あなたoutput_controlでからデータを取得サービス:

$scope.appdata = DataService.get(); 

paでコントローラのInject DataServiceそれをパラメータとして使用する

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

ありがとうございます!私はまだ私がしたい正確なことに取り組んでいますが、あなたの答えは私に何をすべきかという大きな手がかりを与えました! –

関連する問題