添加替换猜数工厂_猜数游戏 xayb python-优快云博客

本文通过几个具体的示例展示了如何利用AngularJS实现数据双向绑定、表单验证及简单的服务管理等功能，帮助读者快速掌握AngularJS的基本用法。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div input{
            margin-left: 40px;
        }
        table{
            margin-top: 40px;
            border-collapse: collapse;
        }
        td{
            width: 150px;
            height: 40px;
            border: 1px solid #000;
            text-align: center;
        }
    </style>
   <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                var a=$("div input").eq(0).val();
                var b=$("div input").eq(1).val();
                var c=$("div input").eq(2).val();
                var text="<tr><td><input type='checkbox' class='checkItem'></td><td>"+a+"</td><td>"+b+"</td><td>"+c+"</td><td><button class='sc'>删除</button></td></tr>"
                /*添加*/
                $("tbody").append(text);
                /*删除*/
                $(".sc").click(function(){
                    $(this).parents("tr").remove();
                });
            });
            /*全选和反选*/
            $("#checkAll").click(function(){
                if($(this).is(":checked")){
                    $(".checkItem").prop("checked",true);
                }else{
                    $(".checkItem").prop("checked",false);
                }
            })
        })
    </script>
</head>
<body>
<div>
    <input type="text">姓名
    <input type="text">密码
    <input type="text">邮箱
    <button id="btn">添加</button>
</div>
<table>
    <thead><tr><td><input type="checkbox" id="checkAll"></td><td>姓名</td><td>密码</td><td>邮箱</td><td>操作</td></tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.service("User",function(){
            var user={
                id:"01",
                name:"Mary",
                Email:"Mary@126.com"
            };
            this.getUser=function(){
                return user;
            };
            this.setUser=function(id,name,Email){
                user.id=id;
                user.name=name;
                user.Email=Email;
            }
        });
        myapp.controller("myctrl",function ($scope,User) {
            $scope.user=User.getUser();
            $scope.setUser=function(){
                User.setUser($scope.id,$scope.name,$scope.Email);
            }
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<ul>
    <li>{{user.id}}</li>
    <li>{{user.name}}</li>
    <li>{{user.Email}}</li>
</ul>
<div>
    id<input type="text" ng-model="id"><br/>
    name<input type="text" ng-model="name"><br/>
    Email<input type="text" ng-model="Email"><br/>
    <button ng-click="setUser()"></button>

</div>

</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
            font-size: 30px;
        }
        input{
            width: 500px;
            height: 50px;
            font-size: 30px;
        }
        button{
            width: 80px;
            height: 50px;
            border: 0;
            text-align: center;
            line-height: 50px;
            background: darkblue;
            color: #fff;
            margin-left: 5px;
        }
    </style>
    <script src="../../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function($scope){
            $scope.check=function(){
                console.log($scope.random);
                $scope.differ=$scope.guess-$scope.random;
                $scope.num++;
            };
            $scope.reset=function(){
                $scope.guess=null;
                $scope.differ=null;
                $scope.num=0;
                $scope.random=Math.ceil(Math.random()*10);
            };
            $scope.reset();
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>请输入一个1-10的整数</h2>
<input type="text" ng-model="guess"><button ng-click="check()">检查</button><button ng-click="reset()">重置</button>
<p ng-if="differ>0">猜大了</p>
<p ng-if="differ<0">猜小了</p>
<p ng-if="differ==0">猜对了</p>
<p>你一共猜了<span ng-bind="num"></span>次</p>
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        //使用工厂方法，我们先定义一个工厂，然后分配方法给它(服务要return一个object出去)
        myapp.factory("User",function(){
            var user={
                id:"6",
                name:"Mary",
                Email:"mary@bawei.com"
            };
            var _getUser=function(){
                return user
            };
            var _setUser=function(id,name,email){
                user.id=id;
                user.name=name;
                user.Email=email;
            };
            return {
                getUser:_getUser,
                setUser:_setUser
            }
        });
        myapp.controller("setCtrl",function($scope,User){
            console.log(User.getUser());
            $scope.user=User.getUser();
            $scope.saveUser=function(){
                //User.setUser(id,name,email);
                User.setUser($scope.id,$scope.name,$scope.email);
            }
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="setCtrl">
<ul>
    <li>{{user.id}}</li>
    <li>{{user.name}}</li>
    <li>{{user.Email}}</li>
</ul>
<div>

    id:<input type="text" ng-model="id"><br/>
    name:<input type="text" ng-model="name"><br/>
    email:<input type="text" ng-model="email"><br/>
    <button ng-click="saveUser()">按钮</button>

</div>

</body>