Question

我正在尝试在表单所在的同一页面的右侧显示一个表单数据（用户名）（没有页面刷新）。我希望一旦我点击提交就会发生这种情况。对于这个miniapp，没有后端（甚至没有本地存储）。

以下是页面右侧的标记： userArray在作用域上定义，并将用户名推入其中。

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

这是我的主要模块和控制器：

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>

Answer 1

你的ng-repeat超出了控制器范围

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

http://plnkr.co/edit/7skU1lBIU5Gy7bJ0Htgh?p=preview

将其移到内部，使其位于mainctrl的

下

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

Answer 2

您要用于将数据显示在具有数据的地方范围之外的元素。

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

});

提交后立即显示表单数据 - Angularjs

2 个答案: