gpt4 book ai didi

javascript - Angular 双向数据绑定(bind)问候语

转载 作者:行者123 更新时间:2023-12-02 16:02:21 25 4
gpt4 key购买 nike

对于这可能是一个非常基本的问题表示歉意。我正在用 Angular 制作一个小演示测验项目。在第一页上,我有一个基本的双向数据绑定(bind)问候语(即,您在框中输入您的名字,它欢迎用户,例如 <p> Welcome {{name}} </p>

如何保存输入的名称并将此欢迎信息转移到下一页/模板?这是代码

<strong>Welcome</strong> {{email}}

<p class="lead">Please enter your name </p>
<body ng-app ng-init="email = 'John';">
<label>enter name<input type="text" ng-model="firstName"/></label><br />
</body>

这是我的路由

'use strict';


angular
.module('angularQuizApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
[...]

我从 yeoman Angular 支架开始,所以只改变了很少的代码。预先感谢您善良的 Angular 向导

最佳答案

为了轻松实现您的愿望,您可以创建一个保留用户名的服务:

angular.module('angularQuizApp').
factory('StorageService',[
function(){

var name = "";

var _setName = function(name){
name = name;
}:

var _getName = function(){
return name;
};

return {
setName : _setName,
getName : _getName,
}



}]);

然后在您的 Controller 中,从服务中调用正确的方法:

angular.module('angularQuizApp').
controller('MyController', ['$scope', 'StorageService',
function($scope, StorageService) {
$scope.name = StorageService.getName(); // or setName(name_value)
}]);

通过这种方式,该服务可以通过您的 Angular 应用程序保留用户名。在这项服务中,您可以保存任何您想要的内容。但是如果您退出应用程序,该对象/名称将被销毁。

如果你想持久保存对象,请查看 Angular-Storage :https://github.com/grevory/angular-local-storage

编辑

这是我制作的一个功能应用程序: http://plnkr.co/edit/7ZzBYnKmV1xflzi81YQc?p=preview

关于javascript - Angular 双向数据绑定(bind)问候语,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31088270/

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