gpt4 book ai didi

html - 在AngularJS中从page2导航回来后如何保留page1的输入数据

转载 作者:搜寻专家 更新时间:2023-10-31 08:28:18 26 4
gpt4 key购买 nike

我有三个带路由的页面。如果我在第一页输入了一些内容并获得了一些结果,接下来我导航到第二页,最后我从第二页返回到第一页。然后我想查看我之前输入的数据和结果。这里是代码片段

index.html

<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container"></div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>

home.html

<div class="jumbotron text-center">
<h1>Home Page</h1>
Billing index :
<input type="text" ng-model='billingMapValue'>
<br/><br/>

Billing value :
{{billingMap[billingMapValue]}}
<ng-click=navigate() type="button" value='submit'>
<p>{{ message }}</p>
</div>

about.html

<div class="jumbotron text-center">
<h1>About Page</h1>

<p>{{ message }}</p>
</div>

script.js

var scotchApp = angular.module('scotchApp', [ 'ngRoute' ]);

scotchApp.config(function($routeProvider) {
$routeProvider

.when('/', {
templateUrl : 'home.html',
controller : 'mainController'
})

.when('/about', {
templateUrl : 'about.html',
controller : 'mainController'
})

.when('/contact', {
templateUrl : 'contact.html',
controller : 'mainController'
});
});

scotchApp.controller('mainController', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
$scope.billingMapValue = "";
$scope.billingMap = new Array();
$scope.billingMap["ZF2"] = "Invoice";
$scope.billingMap["ZRE"] = "Credit for Returns";
$scope.billingMap["ZG2"] = "Credit Memo";
$scope.billingMap["ZL2"] = "Debit Memo";
$scope.billingMap["ZS2"] = "Cancellation of Credit Memo";
$scope.billingMap["ZS1"] = "Cancel. Invoice (S1)";
});

现在我需要的是。如果我运行 index.html 页面,我将在主页中有一个输入文本框。如果输入一些索引值,如“ZF2”,我将看到值“invoice”。在 .home、.about 和 .contact 页面顶部将有超链接列表。我将单击“关于项目”,然后导航到“关于”页面。然后我通过单击主页超链接再次导航到主页,现在我需要查看我输入和获取的以前的数据。该怎么做?提前致谢。

最佳答案

我建议您使用服务,它将作为不同 Controller 之间的共享资源。

您需要对代码进行一些更改。

  1. 您需要将所有静态变量移至服务常数或 Angular 常数。
  2. 使用dot rule同时绑定(bind)将自动更新您的绑定(bind)的对象。
  3. 为每个 View 分配不同的 Controller ,这将是更加模块化的方法。

服务

scotchApp.service('dataService', function() {
this.data = {}
this.data.billingMap = new Array();
this.data.billingMap["ZF2"] = "Invoice";
this.data.billingMap["ZRE"] = "Credit for Returns";
this.data.billingMap["ZG2"] = "Credit Memo";
this.data.billingMap["ZL2"] = "Debit Memo";
this.data.billingMap["ZS2"] = "Cancellation of Credit Memo";
this.data.billingMap["ZS1"] = "Cancel. Invoice (S1)";
this.data.selectedBillMap = '';
});

Controller

scotchApp.controller('mainController', function($scope, dataService) {
$scope.message = 'Everyone come and see how good I look!';
$scope.billingData = dataService.data.billingMap;
});

Demo Plunkr

关于html - 在AngularJS中从page2导航回来后如何保留page1的输入数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30820245/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com