Javascript 提交后立即在侧面显示表单数据-Angularjs_Javascript_Forms_Angularjs_Validation

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

javascript forms angularjs validation

Javascript 提交后立即在侧面显示表单数据-Angularjs,javascript,forms,angularjs,validation,Javascript,Forms,Angularjs,Validation,我试图在表单所在页面的右侧显示一条表单数据，即用户名（无页面刷新）。我希望这一切在我点击submit时立即发生。对于这个迷你应用程序，没有后端（甚至没有本地存储）以下是页面右侧的标记： userArray在作用域上定义，并将用户名推入其中 <div class="index-right"> <p ng-repeat="user in userArray"> {{ user }} </p>

我试图在表单所在页面的右侧显示一条表单数据，即用户名（无页面刷新）。我希望这一切在我点击submit时立即发生。对于这个迷你应用程序，没有后端（甚至没有本地存储）

以下是页面右侧的标记：

userArray

在作用域上定义，并将用户名推入其中

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

目前，这些用户名没有出现在头版。尽管如此，它们还是被推到了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>


登记处
注册页

用户名
需要用户名
用户名太短
用户名太长
电子邮件
请输入有效的电子邮件
密码
密码至少需要8个字符长
密码太长
密码至少需要一个整数、一个小写字母和一个大写字母
密码（确认）
密码不匹配



提交
{{user}}

您的ng repeat已超出控制器范围

例如，我为您创建了一个plunker（为了简单起见，删除了一些字段）

将此移动到内部，使其处于mainctrl的控制之下

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


{{user}}

您要用于显示数据的元素将在包含数据的位置的范围之外

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

哪里定义了

$scope.formData.username

？与

isValid

相同，其中

isValid

来自

formData。用户名

是从输入标签上的ng模型获得的。我假设我不能简单地使用

$scope.formData.username

。如何继续？@TheSharpieOne

是有效的

是来自表单标记的布尔值，当前未显示。我已添加了整个index.html页面。请看一看，这张表格很好用。它的数据正被推送到userArray中。我试图实现的是，立即在视图上呈现表单数据，而无需任何页面刷新。现在，我该怎么做呢？如果您在表单标签上使用

ng submit

，它将自动处理提交事件，无论是单击按钮还是按enter键。好的-现在我看到您的问题已更新。在控制器中，尝试$scope.formData={}@bhantol这一步的目的是什么

$scope.formData.username

从输入标签上的

formData.username

输入中获取。

userArray

中已包含用户名。我正在浏览器上安慰数组。我已经可以看到数组中的名称了。只是，

ng repeat

没有显示名称。@bhantol您在鱼叉指出控制器范围后更改了答案。此外，扩展控制器的范围就像剪切和粘贴一样简单。没有必要以普朗克为例。聪明的举动，布拉。哈哈！这是

ng控制器

指令的位置。我刚把它移到了身体标签上。问题解决了。但是，您关于

$rootScope

的观点也非常有用。谢谢你的帮助。

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

<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);
    };

});