逻辑的问卷下一步按钮？ [英] Logic for the Next button for the questionnaire?

查看：169 发布时间：2016/4/7 23:46:10 javascript jquery html angularjs

本文介绍了逻辑的问卷下一步按钮？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在AngularJS初学者，遇到了一些问题。我试图制造具有每个页面上1个问题的调查问卷。在每一个下一步按钮数据是保存在数据库中。我试图做一个Next按钮逻辑，但无法得到一个想法如何使一个普通的NEXT按钮逻辑，这使得采用NG-秀场旁边，禁用当前和最后存储领域的数据库中的当前值。有人可以帮助作出下一步按钮逻辑，这将使下一页下一分区展示，也是数据存储在数据库？

HTML code：

 ＆LT; DIV CLASS =容器＆GT;
 ＆LT; DIV CLASS =排液＆GT;
    ＆lt;节类=COL-MD-12井＆GT;
        ＆LT; H1＆GT;＆LT; I类=发发键＆GT;＆LT; / I＆gt;用户创造与LT; / H1＆GT;
        ＆LT;小时/＆GT;
        ＆LT;窗体类=形横＆GT;
            ＆LT; DIV CLASS =警戒警报的信息角色=警报＆GT;
                ＆LT;强＆GT;＆LT; I类=发FA-信息圈＆GT;＆LT; I＆GT /;基本信息与LT; / STRONG＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =表单组NG秀=firstNameDiv＆GT;
                ＆LT;标签类=COL-SM-2控制标签为=名字＆gt;首先名称和LT; /标签＆gt;
                ＆LT; DIV CLASS =COL-SM-10＆GT;
                    ＆LT;输入类型=文本级=表格控ID =名字占位符=名NG-模式=user.firstName要求/＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
             ＆LT; DIV CLASS =表单组NG秀=middleNameDiv＆GT;
                ＆LT;标签类=COL-SM-2控制标签为=中间名＆GT;中间名＆LT; /标签＆gt;
                ＆LT; DIV CLASS =COL-SM-10＆GT;
                    ＆LT;输入类型=文本级=表格控ID =中间名占位符=中间名NG模型=user.middleName/＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
             ＆LT; DIV CLASS =表单组NG秀=lastNameDiv＆GT;
                ＆LT;标签类=COL-SM-2控制标签为=姓氏＆GT;姓＆LT; /标签＆gt;
                ＆LT; DIV CLASS =COL-SM-10＆GT;
                    ＆LT;输入类型=文本级=表格控ID =姓氏占位符=姓吴模型=user.lastName/＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =表单组NG秀=genderDiv＆GT;
                ＆LT;标签类=COL-SM-2控制标签为=性别＆GT;性别与LT; /标签＆gt;
                ＆LT; DIV CLASS =COL-SM-10＆GT;
                    ＆LT; DIV CLASS =单选＆GT;
                        ＆LT;标签＆gt;＆LT;输入类型=电台NAME =男吴模型=user.gender＆GT;男＆LT; /标签＆gt;
                    ＆LT; / DIV＆GT;
                    ＆LT; DIV CLASS =单选＆GT;
                        ＆LT;标签＆gt;＆LT;输入类型=电台NAME =女NG-模式=user.gender残疾＆GT;女＆LT; /标签＆gt;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =表单组NG秀=ageDiv＆GT;
                ＆LT;标签类=COL-SM-2控制标签为=年龄＆GT;年龄＆LT; /标签＆gt;
                ＆LT; DIV CLASS =COL-SM-10＆GT;
                    ＆LT;输入类型=文本级=表格控ID =年龄占位符=时代NG-模式=user.age/＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =表单组＆GT;
                ＆LT; DIV CLASS =COL-SM-偏移2 COL-SM-10＆GT;
                    ＆LT; A HREF =＃类=BTN BTN-默认＆GT;＆LT; I类=发发箭头圈左＆GT;＆LT; / I＆GT;返回＆LT; / A＆GT;
                    ＆LT; A HREF =＃类=BTN BTN-默认＆GT;＆LT; I类=发发箭头圈左NG点击=下一步（）＆GT;＆LT; / I＆GT;下一页＆LT; / A＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; /表及GT;
    ＆LT; /节＆gt;
＆LT; / DIV＆GT;

使用Javascript：UserController.js

 （函数（）{
使用严格的;angular.module（'对myApp'）。控制器（'UserCtrl'，函数（$范围，$ rootScope，$ routeParams，$ sanitize方法，$位置，UserSrv）{
    //加载变量来显示纺丝加载图标
    $ scope.loading = FALSE;    $ scope.init =功能（）{
        $ scope.firstNameDiv =真;
        $ scope.middleNameDiv = FALSE;
        $ scope.lastNameDiv = FALSE;
        $ scope.genderDiv = FALSE;
        $ scope.ageDiv = FALSE;
    };
    //每个控制器实例运行一次
    $ scope.init（）;    $ scope.next =功能（）{
        $ scope.firstNameDiv = FALSE;
        //与firstNameDiv值呼叫的用户服务。
        UserSrv.saveData（）;
        $ scope.middleNameDiv =真;
        //逻辑，以使下一个字段并保存当前字段值
        //？
    }
}）;
}（））;

解决方案

您可以创建一个多步的形式（又名向导）。
为此，为什么不使用角UI路由器：

https://scotch.io/tutorials/angularjs-多步骤的外形采用的UI路由器

这是一个教程指导创建向导，并有一个工作示例（一 Plunker ）。

还有其他的角模块其目的是做同样的：

https://github.com/troch/angular-multi-step-form （演示和文档这里）

https://github.com/mgonto/angular-wizard （的演示这里）

和结束另一个教程与工作演示：

HTTP：//$c$c.realcrowd.com /最美妙的精灵 - 中 - angularjs /

但是，如果你的谷歌的为多步的形式角，你可以找到更多的例子。

这是另外的计算器的，你可以找到关于如何创建一个多步骤的形式建议（例如见的 AngularJS多步表单验证）。

I am beginner in AngularJS and facing some issues. I am trying to make a questionnaire having 1 question on each page. On every Next button data is save in the database. I am trying to make a Next button logic but couldn't get an idea how to make a generic NEXT button logic which enables next field using ng-show, disables the current one and lastly store the current value of field in database. Can someone help to make a logic for Next button that will enable next div show on next page and also store data in Database?

HTML Code:

<div class="container">
 <div class="row-fluid">
    <section class="col-md-12 well">
        <h1><i class="fa fa-key"></i>User Creation</h1>
        <hr />
        <form class="form-horizontal">
            <div class="alert alert-info" role="alert">
                <strong><i class="fa fa-info-circle"></i> Basic Information </strong>
            </div>
            <div class="form-group" ng-show="firstNameDiv">
                <label class="col-sm-2 control-label" for="firstName">First Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="firstName" placeholder="First Name" ng-model="user.firstName" required />
                </div>
            </div>
             <div class="form-group" ng-show="middleNameDiv">
                <label class="col-sm-2 control-label" for="middleName">Middle Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="middleName" placeholder="Middle Name" ng-model="user.middleName" />
                </div>
            </div>
             <div class="form-group" ng-show="lastNameDiv">
                <label class="col-sm-2 control-label" for="lastName">Last Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="lastName" placeholder="Last Name" ng-model="user.lastName" />
                </div>
            </div>
            <div class="form-group" ng-show="genderDiv">
                <label class="col-sm-2 control-label" for="gender">Gender</label>
                <div class="col-sm-10">
                    <div class="radio">
                        <label><input type="radio" name="male" ng-model="user.gender">Male</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="female" ng-model="user.gender" disabled>Female</label>
                    </div>
                </div>
            </div>
            <div class="form-group" ng-show="ageDiv">
                <label class="col-sm-2 control-label" for="age">Age</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="age" placeholder="Age" ng-model="user.age" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <a href="#" class="btn btn-default"><i class="fa fa-arrow-circle-left"></i> Back</a>
                    <a href="#" class="btn btn-default"><i class="fa fa-arrow-circle-left" ng-click="next()"></i> Next</a>
                </div>
            </div>
        </form>
    </section>
</div>

Javascript: UserController.js

(function () {
'use strict';

angular.module('myApp').controller('UserCtrl', function ($scope, $rootScope,   $routeParams, $sanitize, $location, UserSrv) {
    // loading variable to show the spinning loading icon
    $scope.loading = false;

    $scope.init = function() {
        $scope.firstNameDiv = true;
        $scope.middleNameDiv = false;
        $scope.lastNameDiv = false;
        $scope.genderDiv = false;
        $scope.ageDiv = false;
    };
    // runs once per controller instantiation
    $scope.init();

    $scope.next = function() {
        $scope.firstNameDiv = false;
        // Call User service with firstNameDiv value.
        UserSrv.saveData();
        $scope.middleNameDiv = true;
        // Logic to enable next field and save the current field value 
        // ???
    }
});
}());

解决方案

You could create a multi-step form (also known as Wizard). For this purpose why not using Angular ui-router as suggested in this post:

https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

which is a tutorial guiding to create a Wizard and has a working example (a Plunker).

There are also other Angular modules which aim to do the same:

And in conclusion another tutorial with working demo:

http://code.realcrowd.com/the-wonderful-wizard-of-angularjs/

But if you "google" for "multi-step form angular" you can find some more examples.

Also on StackOverflow you can find suggestions on how to create a multi-step form (for example see AngularJS multi-step form validation).

这篇关于逻辑的问卷下一步按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

逻辑的问卷下一步按钮？ [英] Logic for the Next button for the questionnaire?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

逻辑的问卷下一步按钮？ [英] Logic for the Next button for the questionnaire?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭