2016-11-19 1 views
0

Dies ist die index.htmlangularjs - Wie übertrage ich Liste zu anderem 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> 

ist dies die 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> 

dies die 2_output.html ist

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

Hallo Leute, ich bin neu in AngularJS und nach etwas Hilfe suchen !. Was ich versuche ist, firstnamehh und lastnamehh als eine Liste zu machen und sie an 2_output.html zu übergeben und es schließlich in einer Tabelle auszudrucken. Der Teil, den ich kämpfe, ist, was ich nach $ routeParams und $ location.path() setzen sollte.

$routeParams.??? 

..

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

einen Rat würde geschätzt !! danke für das Lesen dieser Frage

Antwort

0

Sie können dies durch

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

    function set(data) { 
     appData = data; 
    } 

    function get() { 
     return appData; 
    } 

    return { 
     set: set, 
     get: get 
    } 

} 

In Ihrem input_control erreichen mit Service, den Sie die Daten an den Dienst einstellen:

DataService.set(shredData); 

In Ihrem output_control aus den Daten erhalten ther service:

$scope.appdata = DataService.get(); 

Inject DataService in den Controllern von pa sse es als Parameter

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

danke !! Obwohl ich immer noch an der genauen Sache arbeite, die ich machen möchte, gab mir deine Antwort einen großen Hinweis, was ich tun sollte! –

Verwandte Themen