zoukankan      html  css  js  c++  java
  • --@angularJS--angular与BootStrap3的应用

    angularJS与BootStrap3是最佳搭档.

    1、Form.html:

    <!doctype html>
    <html ng-app="UserInfoModule">

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
        <script src="js/angular-1.3.0.js"></script>
        <script src="Form.js"></script>
    </head>

    <body>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">双向数据绑定</div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12">
                        <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
                            <div class="form-group">
                                <label class="col-md-2 control-label">
                                    邮箱:
                                </label>
                                <div class="col-md-10">
                                    <input type="email" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">
                                    密码:
                                </label>
                                <div class="col-md-10">
                                    <input type="password" class="form-control" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" ng-model="userInfo.autoLogin">自动登录
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <button class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button>
                                    <button class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button>
                                    <button class="btn btn-default" ng-click="resetForm()">重置表单</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>

    </html>

    2、Form.js:

    var userInfoModule = angular.module('UserInfoModule', []);
    userInfoModule.controller('UserInfoCtrl', ['$scope',
        function($scope) {
            $scope.userInfo = {                                                       //初始化赋值
                email: "253445528@qq.com",
                password: "253445528",
                autoLogin: true
            };
            $scope.getFormData = function() {                                  //获取表单数据方法
                console.log($scope.userInfo);
            };
            $scope.setFormData = function() {                                  //设置方法
                $scope.userInfo = {
                    email: 'damoqiongqiu@126.com',
                    password: 'damoqiongqiu',
                    autoLogin: false
                }
            };
            $scope.resetForm = function() {                                       //重置方法
                $scope.userInfo = {
                    email: "253445528@qq.com",
                    password: "253445528",
                    autoLogin: true
                };
            }
        }
    ])

  • 相关阅读:
    shell命令编程小例
    汇编输出0255ascii码(VGA下)
    linux程序时间控制小例
    Undefined exploded archive location 项目不能部署
    关于org.apache.jasper.JasperException: Unable to compile class for JSP问题的解决
    Some characters cannot be mapped using "GBK" character encoding 的解决办法
    如何处理Windows Forms程序中未处理的异常
    关于bos的edit页面的文件加载顺序
    关于unable to extend lob segment的问题解决方法
    从事ASP.NET开发两年多,谈谈对两三年工作经验的ASP.NET程序员的基本见解
  • 原文地址:https://www.cnblogs.com/koleyang/p/4509603.html
Copyright © 2011-2022 走看看