个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
这是我第一次尝试 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>
最佳答案
您应该使用一个服务来进行调用并在页面之间存储数据。
您的 Controller 将调用此服务以获取数据或要求刷新数据。
关于javascript - Angular : How do I pass data between 2 views of a single page app?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38767562/
24
4
0
我是一名优秀的程序员,十分优秀！