这是我第一次尝试 Angular.js。我正在尝试创建一个加载一些 JSON 并显示列表的单页应用程序。当我单击列表中的链接时，它应该转到一个新页面并通过 JSON 数据中的 id 更详细地填充该页面。
非常感谢任何帮助。
这是 JavaScript (easyjet.js):
var app = angular.module('easyjet', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider.state('flights', {
url: '/',
templateUrl: 'templates/list.html',
controller: 'ResultsController'
})
.state('details', {
url: '/detail/:id',
templateUrl: 'templates/fulldetails.html',
controller: 'ResultsController'
});
$urlRouterProvider.otherwise('/');
});
app.controller('ResultsController', function($scope, $http, $stateParams) {
console.log($stateParams);
// Get JSON data
$http({
method : "GET",
url : "http://ejtestbed.herokuapp.com/flights"
}).then(function(response) {
$scope.resultsData = response.data;
}, function(response) {
$scope.resultsData = response.statusText;
console.log("Oops! Couldn't load JSON!");
});
// Select and display result details
$scope.selectedResult = null;
$scope.selectResult = function (result) {
$scope.selectedResult = result;
};
//Sorting default setting
$scope.order = "flightNumber.number";
});
这是默认的 HTML 页面:
<!DOCTYPE html>
<html ng-app="easyjet">
<head>
<meta charset="utf-8" />
<title>Easyjet, Flights</title>
</head>
<body>
<div ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script src="easyjet.js"></script>
</body>
</html>
模板文件: 1.list.html
<div class="container">
<!-- Filtering & Sorting -->
<div>
<input type="text" id="search" ng-model="search.$" placeholder="Search anything..." />
<select ng-model="order">
<option value="flightNumber.number">Flight Number (ASC)</option>
<option value="-flightNumber.number">Flight Number (DEC)</option>
<option value="localDepartureTime">Date (ASC)</option>
<option value="-localDepartureTime">Date (DEC)</option>
</select>
</div>
<!-- Result List -->
<div class="result"
ng-repeat="result in filteredResults = (resultsData | filter: search | orderBy: order)"
ng-style="{ 'background-color': result.id == selectedResult.id ? 'lightgray' : '' }"
ng-click="selectResult(result)">
<span style="display:none;">{{ $index }}</span>
<a ng-href="#/detail/{{ result.id }}"><span>EZY {{ result.flightNumber.number }}</span></a>
<span>From: {{ result.departureAirport }}</span>
<span>To: {{ result.arrivalAirport }}</span>
<span>Date: {{ result.localDepartureTime | date:"longDate" }}</span>
</div>
<div ng-show="filteredResults.length == 0">No Result Found</div>
</div>
- fulldetails.html
- 航类号:{{ selectedResult.flightNumber.carrierCode }} {{ selectedResult.flightNumber.number }}
- 发件人:{{ selectedResult.departureAirport }}
- 收件人:{{ selectedResult.arrivalAirport }}
- 出发航站楼:{{ selectedResult.depTerminalName }}
- 出发时间:{{ selectedResult.localDepartureTime |日期:“longDate”}}
- 到达时间:{{ selectedResult.localArrivalTime |日期:“longDate”}}
- 可用座位:{{ selectedResult.seatsAvailable }}
- 成人票价:{{ selectedResult.prices.adult.value }}
- 借记卡预订费:{{ selectedResult.prices.adult.valueWithDebitCard }}
- 信用卡预订费:{{ selectedResult.prices.adult.valueWithCreditCard }}
- child 票价:{{ selectedResult.prices.child.value }}
- 借记卡预订费:{{ selectedResult.prices.child.valueWithDebitCard }}
- 信用卡预订费:{{ selectedResult.prices.child.valueWithCreditCard }}
最佳答案
您应该使用一个服务来进行调用并在页面之间存储数据。
您的 Controller 将调用此服务以获取数据或要求刷新数据。
关于javascript - Angular : How do I pass data between 2 views of a single page app?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38767562/