angularjs實現(xiàn)猜數(shù)字大小功能
更新時間：2020年05月20日 16:56:36 作者：XJian
這篇文章主要為大家詳細(xì)介紹了angularjs實現(xiàn)猜數(shù)字大小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Angular Renderer (渲染器)的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Angular ng-repeat 對象和數(shù)組遍歷實例
這篇文章主要介紹了Angular ng-repeat對象和數(shù)組遍歷的相關(guān)資料,并附代碼示例，需要的朋友可以參考下2016-09-09
Angular中使用響應(yīng)式表單的詳細(xì)步驟
Angular提供了兩種處理表單的方式模板驅(qū)動表單和響應(yīng)式表單（也稱為模型驅(qū)動表單）,使用模板驅(qū)動表單時,模板指令被用來構(gòu)建表單的內(nèi)部表示,在本文中,您探討了如何將響應(yīng)式表單應(yīng)用于一個示例 Angular 應(yīng)用程序2024-02-02
本文主要介紹了RequireJs的使用。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了深入理解Angular4訂閱(Subscribe)與取消，詳細(xì)的介紹了訂閱與取消的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
本篇文章主要介紹了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)框的兩種方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-10-10
使用oclazyload懶加載angular的模塊,刷新頁面后,單擊回退按鈕無法返回上一個頁面.怎么回事呢？下面小編給大家?guī)砹薬ngular懶加載機制刷新后無法回退的快速解決方法，非常不錯，感興趣的朋友參考下2016-08-08
Angular學(xué)習(xí)教程之RouterLink花式跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于Angular學(xué)習(xí)教程之RouterLink花式跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05