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); //根據差值判斷顯示、隱藏狀態(tài)
$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.js項目中使用gulp實現自動化構建以及壓縮打包詳解
基于流的前端自動化構建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項目中。下面這篇文章主要給大家介紹了關于在Angular.js項目中使用gulp實現自動化構建以及壓縮打包的相關資料，需要的朋友可以參考下。2017-07-07
Angular 2父子組件數據傳遞之局部變量獲取子組件其他成員
這篇文章主要給大家介紹了關于Angular 2父子組件之間數據傳遞之局部變量獲取子組件其他成員的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
AngularJS實現用戶登錄狀態(tài)判斷的方法(Model添加攔截過濾器,路由增加限制)
這篇文章主要介紹了AngularJS實現用戶登錄狀態(tài)判斷的方法,通過Model添加攔截過濾器,路由增加限制實現針對登陸狀態(tài)的判斷功能,需要的朋友可以參考下2016-12-12
本文主要介紹 AngularJS Service,這里整理了AngularJS Servic的詳細資料,并提供代碼實例,有需要的小伙伴可以參考下2016-07-07
這篇文章主要給大家介紹了關于Angular8基礎應用之表單及其驗證的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Angular8具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
這篇文章主要介紹了Angular4編程之表單響應功能,結合實例形式分析了Angular4表單響應功能的具體實現步驟與相關操作技巧,需要的朋友可以參考下2017-12-12
Angular2.0/4.0 使用Echarts圖表的示例代碼
本篇文章主要介紹了Angular2.0/4.0 使用Echarts的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Angularjs自定義指令實現三級聯(lián)動 選擇地理位置
這篇文章主要介紹了Angularjs自定義指令實現三級聯(lián)動，選擇地理位置，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用來定義模板的，當使用ng-template定義好一個模板之后，可以用ng-container和templateOutlet指令來進行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友參考下吧2018-08-08
AngularJs $parse、$eval和$observe、$watch詳解
這篇文章主要介紹了AngularJs $parse、$eval和$observe、$watch的相關資料,需要的朋友可以參考下2016-09-09