angularjs實現(xiàn)猜數(shù)字大小功能

更新時間：2020年05月20日 16:56:36 作者：XJian

這篇文章主要為大家詳細介紹了angularjs實現(xiàn)猜數(shù)字大小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了angularjs實現(xiàn)猜數(shù)字大小功能的具體代碼，供大家參考，具體內(nèi)容如下

<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">您猜的數(shù)大了</span>
 <span ng-if="fil<0">您猜的數(shù)小了</span>
 <span ng-if="fil==0">您猜對了</span>
 <p>猜的次數(shù)<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);　//根據(jù)差值判斷顯示、隱藏狀態(tài)
  $scope.fil=$scope.guess-$scope.random;
  $scope.n++;

  };　　　　　　　　　　//重置方法
  $scope.reset=function () {
  $scope.guess=null;
  $scope.fil=null;
  $scope.n = 0;　　　　　　　　　　　//得到隨機數(shù)
  $scope.random=Math.ceil(Math.random()*1000);
  };
  $scope.reset();
 })



 </script>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Angular Renderer (渲染器)的具體使用
這篇文章主要介紹了Angular Renderer (渲染器)的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Angular ng-repeat 對象和數(shù)組遍歷實例
這篇文章主要介紹了Angular ng-repeat對象和數(shù)組遍歷的相關(guān)資料,并附代碼示例，需要的朋友可以參考下
2016-09-09
Angular中使用響應(yīng)式表單的詳細步驟
Angular提供了兩種處理表單的方式模板驅(qū)動表單和響應(yīng)式表單（也稱為模型驅(qū)動表單）,使用模板驅(qū)動表單時,模板指令被用來構(gòu)建表單的內(nèi)部表示,在本文中,您探討了如何將響應(yīng)式表單應(yīng)用于一個示例 Angular 應(yīng)用程序
2024-02-02
RequireJs的使用詳解
本文主要介紹了RequireJs的使用。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
深入理解Angular4訂閱(Subscribe)與取消
這篇文章主要介紹了深入理解Angular4訂閱(Subscribe)與取消，詳細的介紹了訂閱與取消的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
Angularjs的啟動過程分析
本篇文章主要介紹了Angularjs的啟動過程分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
本文主要給大家介紹基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能，通過第三方控件來實現(xiàn)，感興趣的朋友跟著小編一起看看具體實現(xiàn)代碼吧
2015-10-10
Angular彈出模態(tài)框的兩種方式
這篇文章主要介紹了Angular彈出模態(tài)框的兩種方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-10-10
Angular懶加載機制刷新后無法回退的快速解決方法
使用oclazyload懶加載angular的模塊,刷新頁面后,單擊回退按鈕無法返回上一個頁面.怎么回事呢？下面小編給大家?guī)砹薬ngular懶加載機制刷新后無法回退的快速解決方法，非常不錯，感興趣的朋友參考下
2016-08-08
Angular學習教程之RouterLink花式跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于Angular學習教程之RouterLink花式跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2018-05-05