个人中心
gpt4 book ai didi

javascript - 提交后立即在侧面显示表单数据 - Angularjs

转载 作者：行者123 更新时间：2023-12-02 17:06:46 24 4
gpt4 key购买 nike

我正在尝试在表单所在的同一页面的右侧显示一份表单数据(用户名)(无需页面刷新)。我希望在我点击提交后立即发生这种情况。对于这个小应用程序，没有后端(甚至没有本地存储)。

以下是页面右侧的标记:userArray 在范围上定义，并将用户名插入其中。

    <div class="index-right">
        <p ng-repeat="user in userArray">
            {{ user }}
        </p>
    </div>

这是我的主模块和 Controller :

var app = angular.module('myApp', ['ngRoute', 'ui.validate']);

app.controller('MainCtrl', function($scope){
    $scope.userArray = [];
    console.log($scope.userArray);
    $scope.submitForm = function(isValid){
        if(isValid){
            $scope.userArray.push($scope.formData.username);
        }
        console.log($scope.userArray);
    };

});

目前，用户名未显示在首页上。尽管如此，它们被插入 userArray 中(我正在浏览器上安慰该数组)。任何有关如何进行的帮助将不胜感激。

我在这里添加整个index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Registration</title>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cosmo/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body ng-app="practichemApp">
    <header class="index-header"><h1>Registration Page</h1></header>
    <hr>
    <div class="index-left" ng-controller="MainCtrl">
        <form id="index-form" name="practichemForm" ng-submit="submitForm(practichemForm.$valid)" novalidate>
            <!-- USERNAME -->
            <div class="form-group" ng-class="{ 'has-error': practichemForm.username.$invalid && !practichemForm.username.$pristine }">
                <label>Username</label>
                <input type="text" name="username" class="form-control" ng-model="formData.username" ng-minlength="3" ng-maxlength="20" required>
                <p ng-show="practichemForm.username.$invalid && !practichemForm.username.$pristine" class="help-block">Username is required</p>
                <p ng-show="practichemForm.username.$error.minlength" class="help-block">Username is too short.</p>
                <p ng-show="practichemForm.username.$error.maxlength" class="help-block">Username is too long.</p>
            </div>
            <!-- EMAIL -->
            <div class="form-group" ng-class="{ 'has-error': practichemForm.email.$invalid && !practichemForm.email.$pristine }">
                <label>Email</label>
                <input type="email" name="email" class="form-control" ng-model="formData.email" required>
                <p ng-show="practichemForm.email.$invalid && !practichemForm.email.$pristine" class="help-block">Please Enter a valid email.</p>
            </div>
            <!-- PASSWORD -->
            <div class="form-group" ng-class="{ 'has-error': practichemForm.password.$invalid && !practichemForm.password.$pristine }">
                <label>Password</label>
                <input type="password" name="password" class="form-control" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/" required>
                <p ng-show="practichemForm.password.$error.minlength" class="help-block">Password needs to be at least 8 characters long.</p>
                <p ng-show="practichemForm.password.$error.maxlength" class="help-block">Password is too long.</p>
                <p ng-show="practichemForm.password.$error.pattern" class="help-block">Password needs at least one integer, one lowercase letter and one uppercase letter.</p>
            </div>
            <!-- PASSWORD CONFIRMATION -->
            <div class="form-group" ng-class="{ 'has-error': practichemForm.passwordConfirm.$error.required && !practichemForm.passwordConfirm.$pristine }">
                <label>Password (confirmation)</label>
                <input type="password" name="passwordConfirm" class="form-control" ng-model="formData.passwordConfirm" ui-validate="'$value == formData.password'" ui-validate-watch="'formData.password'" ng-minlength="8" ng-maxlength="20" required/>
                <p ng-show="practichemForm.passwordConfirm.$error.ui-validate && practichemForm.passwordConfirm.$dirty && practichemForm.passwordConfirm.$error.required">Passwords don't match.</p>
            </div>
            <br><br>
            <button type="submit" class="btn btn-danger" ng-disabled="practichemForm.$invalid">Submit</button>
        </form>
    </div>
    <div class="index-right" ng-repeat="user in userArray">
        {{ user }}
    </div>
    <script type="text/javascript" src="bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
    <script type="text/javascript" src="bower_components/angular-ui-utils/validate.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

最佳答案

您想要用来在拥有数据的位置范围之外显示数据的元素。

<div class="index-left" ng-controller="MainCtrl">
    ...
</div>
<div class="index-right" ng-repeat="user in userArray">
    {{ user }}
</div>

您可以使用服务来共享信息，或者将userArray放在更高的范围内(例如$rootScope)，或者将ng-controller移动到一个元素包装两者。

$rootScope 是最简单的..试试这个:

<div class="index-left" ng-controller="MainCtrl">
    ...
</div>
<div class="index-right" ng-repeat="user in userArray">
    {{ $root.user }}
</div>

var app = angular.module('myApp', ['ngRoute', 'ui.validate']);

app.controller('MainCtrl', function($scope, $rootScope){
    $rootScope.userArray = [];
    console.log($rootScope.userArray);
    $scope.submitForm = function(isValid){
        if(isValid){
            $rootScope.userArray.push($scope.formData.username);
        }
        console.log($rootScope.userArray);
    };

});

关于javascript - 提交后立即在侧面显示表单数据 - Angularjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25170749/

24 4 0
文章推荐： javascript - 如何强制按顺序加载脚本数组？
文章推荐： javascript - 获取特定数组值
文章推荐： javascript - 理解原型(prototype)和这个
文章推荐： javascript - array.push 到数组中的数组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com