angularjs实现猜数字大小功能

 更新时间:2020年05月20日 16:56:36   作者:XJian  
这篇文章主要为大家详细介绍了angularjs实现猜数字大小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了angularjs实现猜数字大小功能的具体代码,供大家参考,具体内容如下

<body ng-app="myapp" ng-controller="myCtrl">
 <h2>猜一猜,多大值?(1-1000)</h2>
 我猜是:<input type="text" ng-model="guess">
 <button ng-click="check()">验证</button><button ng-click="reset()">再玩一次</button><br>
 <span ng-if="fil>0">您猜的数大了</span>
 <span ng-if="fil<0">您猜的数小了</span>
 <span ng-if="fil==0">您猜对了</span>
 <p>猜的次数<span>{{n}}</span></p>
</body>

js代码:

<script src="angular.min.js"></script>
 <script>
 var myapp=angular.module("myapp",[]);
 myapp.controller("myCtrl",function ($scope) {
      //验证
  $scope.check=function () {
  console.log($scope.random); //根据差值判断显示、隐藏状态
  $scope.fil=$scope.guess-$scope.random;
  $scope.n++;

  };          //重置方法
  $scope.reset=function () {
  $scope.guess=null;
  $scope.fil=null;
  $scope.n = 0;           //得到随机数
  $scope.random=Math.ceil(Math.random()*1000);
  };
  $scope.reset();
 })



 </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Angular Renderer (渲染器)的具体使用

    Angular Renderer (渲染器)的具体使用

    这篇文章主要介绍了Angular Renderer (渲染器)的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Angular ng-repeat 对象和数组遍历实例

    Angular ng-repeat 对象和数组遍历实例

    这篇文章主要介绍了Angular ng-repeat对象和数组遍历的相关资料,并附代码示例,需要的朋友可以参考下
    2016-09-09
  • Angular中使用响应式表单的详细步骤

    Angular中使用响应式表单的详细步骤

    Angular提供了两种处理表单的方式模板驱动表单和响应式表单(也称为模型驱动表单),使用模板驱动表单时,模板指令被用来构建表单的内部表示,在本文中,您探讨了如何将响应式表单应用于一个示例 Angular 应用程序
    2024-02-02
  • RequireJs的使用详解

    RequireJs的使用详解

    本文主要介绍了RequireJs的使用。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 深入理解Angular4订阅(Subscribe)与取消

    深入理解Angular4订阅(Subscribe)与取消

    这篇文章主要介绍了深入理解Angular4订阅(Subscribe)与取消,详细的介绍了订阅与取消的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Angularjs的启动过程分析

    Angularjs的启动过程分析

    本篇文章主要介绍了Angularjs的启动过程分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 基于AngularJS实现页面滚动到底自动加载数据的功能

    基于AngularJS实现页面滚动到底自动加载数据的功能

    本文主要给大家介绍基于AngularJS实现页面滚动到底自动加载数据的功能,通过第三方控件来实现,感兴趣的朋友跟着小编一起看看具体实现代码吧
    2015-10-10
  • Angular弹出模态框的两种方式

    Angular弹出模态框的两种方式

    这篇文章主要介绍了Angular弹出模态框的两种方式,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-10-10
  • Angular懒加载机制刷新后无法回退的快速解决方法

    Angular懒加载机制刷新后无法回退的快速解决方法

    使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.怎么回事呢?下面小编给大家带来了angular懒加载机制刷新后无法回退的快速解决方法,非常不错,感兴趣的朋友参考下
    2016-08-08
  • Angular学习教程之RouterLink花式跳转

    Angular学习教程之RouterLink花式跳转

    这篇文章主要给大家介绍了关于Angular学习教程之RouterLink花式跳转的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2018-05-05

最新评论