angularjs-如何将列表传递给其他HTML? [英] angularjs - how do i pass list to other html?
问题描述
这是index.html
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>
这是1_input.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>
这是2_output.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>
大家好，我是angularjs的新手，正在寻求帮助！我正在尝试的是将firstnamehh和lastnamehh作为列表，并将其传递给2_output.html，最后将其打印在表中.我苦苦挣扎的部分是我应该放在$ routeParams和$ location.path()之后.
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
推荐答案
您可以通过使用服务实现
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
}
}
在input_control中，您可以将数据设置为服务:
In your input_control you can set the data to the service :
DataService.set(shredData);
在output_control中，从其他服务获取数据:
In your output_control get the data from ther service :
$scope.appdata = DataService.get();
通过将DataService作为参数传递到控制器中
Inject DataService in the controllers by passing it as a parameter
app.controller('input_control', ['DataService', function($scope, $location, DataService){
//Your logic
}]);
这篇关于angularjs-如何将列表传递给其他HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
