[java学习4]angularJS练习2-表单练习

最新推荐文章于 2021-11-23 22:16:51 发布

灵眼儿上方

最新推荐文章于 2021-11-23 22:16:51 发布

阅读量330

点赞数

分类专栏： java相关文章标签：表单

本文链接：https://blog.csdn.net/liyanq528/article/details/52876845

版权

java相关专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<img src="https://img-blog.csdn.net/20161020210152760" alt="" /><!DOCTYPE html>
<html lang="en" ng-app="RootApp">
<head>
    <meta charset="UTF-8">
    <script src="FrameWork/angular.js"></script>
    <script src="FrameWork/angular-route.js"></script>
    <script src="FrameWork/angular-animate.js"></script>
    <script src="JS/App.js"></script>
    <script src="JS/Controllers.js"></script>
    <link rel="stylesheet" href="Css/bootstrap.css">
    <link rel="stylesheet" href="Css/backColor.css">
    <title>图书管理</title>
</head>
<body>
<div ng-view>组件区域</div>
<div class="panel panel-primary" style="width: 500px">
    <div class="panel-heading">
        <div class="panel-title">双向数据绑定</div>
        <div class="panel-body  backColor-{{backcolor}}" ng-controller="formController">
            <div class="row">
                <!--col-md-12表示12列，md是middle的意思，中等的屏幕。-->
                <div class="col-md-12">
                    <!--role="form"给bootstrap使用，表示是表单-->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-lg-2">邮箱：</label>
                            <div class="col-lg-10">
                                <input ng-model="userInfo.email" type="email" class="form-control"
                                       placeholder="example@tom.com">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2">密码：</label>
                            <div class="col-lg-10">
                                <input ng-model="userInfo.pass" type="password" class="form-control"
                                       placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <input ng-model="userInfo.autoLoad" type="checkbox">自动登录
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button ng-click="printUserInfo()" class="btn btn-default">打印userinfo</button>
                                <button ng-click="resetUserInfo()" class="btn btn-default">重置userinfo</button>
                                <button ng-click="switchColor()" class="btn btn-default">切换颜色</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

/**
 * Created by liyanq on 16/10/19.
 */
var RootApp = angular.module("RootApp",["ngRoute","ngAnimate","bookAppController"]);

RootApp.config(function ($routeProvider) {
    $routeProvider.when("/hello",{
        templateUrl: 'Templates/Hello.html',
        controller: 'HelloController'
    }).when("/list",{
        templateUrl:'Templates/bookList.html',
        controller:"bookListController"
    }).otherwise({
        // redirectTo:"/hello"
    });
});

RootApp.controller("formController",function ($scope) {
    $scope.backcolor = "red";
    $scope.userInfo = {
        email:"liyanq528@163.com",
        pass:"12345",
        autoLoad:true
    };
    $scope.printUserInfo = function () {
        console.log($scope.userInfo);
    };
    $scope.resetUserInfo = function () {
        $scope.userInfo = {
            email:"",
            pass:"",
            autoLoad:false
        };
    };
    $scope.switchColor = function () {
       if ($scope.backcolor == "red"){
           $scope.backcolor = "green";
       }
       else{
           $scope.backcolor = "red";
       }
    };
});

.backColor-red{
    background-color: red;
}
.backColor-green{
    background-color: green;
}

今天是第一天接触bootstrap，效果果然不是盖的，杠杠的，上一张靓照。

灵眼儿上方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录