2. 程式人生 > >AngularJS之 watch方法（監控動作）

AngularJS之 watch方法（監控動作）

阿新 • • 發佈：2019-02-16
ng-model alt keyword back svg chap ecc ctype -h

1、問題背景

AngularJS中的$watch方法來監聽數據變化

2、實現源碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS之$watch方法（監控動作）</title>
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<style>
			body{
				font-size
 
: 12px;
				font-family: "微軟雅黑";
				background-color: #F8EFC0;
				backface-visibility: visible;
			}
			div{
				margin: 10px 10px 10px 10px;
			}
		</style>
		<script>
			var app = angular.module("watchApp",[]);
			app.controller("watchCon",[‘$scope‘,function($scope){
				$scope.count = 0;
				$scope.username = ""
 
;
				$scope.$watch(‘username‘,function(){
					$scope.count++;
				});
			}]);
		</script>
	</head>
	<body ng-app="watchApp">
		<div ng-controller="watchCon">
			<div>
				<input type="text" id="username" ng-model="username" maxlength="12" autocomplete="on"/>
			</div
 
>
			<div>
				{{count}}
			</div>
		</div>
	</body>
</html>

3、實現結果

（1）初始化

技術分享圖片

（2）改變輸入框值

技術分享圖片

再分享一下我老師大神的人工智能教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智能的隊伍中來！https://blog.csdn.net/jiangjunshow

AngularJS之 watch方法（監控動作）

相關推薦

AngularJS之 watch方法（監控動作）

ng-model alt keyword back svg chap ecc ctype -h 1、問題背景 AngularJS中的$watch方法來監聽數據變化 2、實現源碼 <!DOCTYPE html> <html> &l

【java設計模式】之 模板方法（Template Method）模式

1. 模板方法的一個例項         這一節主要來學習一下設計模式中的模板方法模式。我們先來看一個例子：假如現在老闆讓你做一個汽車的模型，要求只要完成基本功能即可，不考慮擴充套件性，那你會怎麼做呢？我們首先會根據經驗設計一個類圖：        由這個類圖可知，非

【設計模式】之模板方法（Template Method）

模板方法的定義為：再一個操作中定義一個演算法的骨架，將演算法中的一些步驟延遲到子類去實現。模板方法允許子類在不該變演算法結構的情況下重新定義演算法的某些步驟。 Define the skeleton of an algorithm in an operation, defe

設計模式之工廠方法（Factory Method）

一 目的    定義一個建立物件的介面，但是讓他的子類去決定初始化哪種型別。工廠方法使得一個類能夠推遲到他的子類去初始化。二 動機    框架運用抽象類來定義和維護物件之間的關係。一個框架經常負責這些物件的建立。考慮一些這麼一個情況：一個能夠展現多個文件的應用程式的框架。在這

backbone之extend方法（剛明白了點）

屬性 開發 console mage ext img shu 構造 del 話說這個extend困擾我好幾天了，今天終於想明白了點。 在之前先要知道什麽是實例方法和靜態方法。 首先定義一個類（js不支持類，但是別人都這麽說，我也不知道為啥），如:var Person=fun

httpclient之post 方法（參數為Map類型）

直接 close 設置 map .config pre 配置 amr public package httpclient;import java.io.BufferedReader;import java.io.IOException;import java.io.Inpu

Mysql 之 編譯安裝方法（Mysql5.7）

select eas base sql_mod work names ase 下載安裝 eating 參考本博客文章：http://blog.51cto.com/12965094/2129267 1. 下載安裝包 wget http://downloads.sourcefo

安全之路 —— 利用遠程線程註入的方法（使用DLL）實現穿墻與隱藏進程

pat 完整路徑 ystemd return cpi printf output inf server 簡介 大多數後門或病毒要想初步實現隱藏進程，即不被像任務管理器這樣典型的RING3級進程管理器找到過於明顯的不明進程，其中比較著名的方法就是通過遠程線程註

python 每日一練之0004題➕file方法（簡單版）

前文 前幾天考試太多一直沒時間寫今天繼續 正文 路漫漫～今天做的第四題發現好像是蠻簡單的，但是看網上大佬們選擇的方法都是正則表示式，。。。我這裡貼出一個簡單的方法吧。為那些看不懂正則的小白們貼一貼 # -*- coding: utf-8 -*- def main(words): with

AngularJS之定時器（timeout）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Lepus監控之SQLServer配置（後續整理）

1、安裝pymssql模組 1-1、環境準備： 1-1-1、unixODBC安裝 yum install unixODBC unixODBC-devel -y 1-1-2、freetds安裝下載 freetds 官網 tar zxf freetds-patched.tar.gzcd freetds-

ES6 Promise物件之例項方法（2）

ES6 Promise物件之例項方法（2） 上一篇關於Promise的文章介紹了Promise的基本用法，這一篇繼續上一篇，介紹Promise的各種方法： （1）Promise.prototype.then() then方法是定義在原型物件Promise.prototype上的。

嵌入式核心及驅動開發之學習筆記（十七） 裝置樹的定義規則和獲取方法

概述 在Linux 2.6中，arch/arm/plat-xxx和arch/arm/mach-xxx中充斥著大量的垃圾程式碼，相當多數的程式碼只是在描述板級細節，而這些板級細節對於核心來講，不過是垃圾，如板上的platform裝置、resource、i2c_board_info、sp

資料結構基礎------1.線性表之單鏈表的建立與輸出方法（Java版）

基礎知識： 線性表（linear list），是其組成元素間具有線性關係的一種線性結構。 線性表有 ①順序儲存結構（sequential storage structure） 順序儲存結構可以簡單的理解利用為 陣列 的形式來進行儲存資料。 ②鏈式儲存結構（ch

B站的運維成長之路（監控篇）

作者簡介： 胡凱 bilibili, 運維負責人 從系統測試到自動化測試到效能測試再到運維，對服務端的興致帶他一步步走近網際網路、步入運維行列。豐富的經歷，讓他對運維有著獨特的思考和認知。 前言 隨著網際網路的高速發展，我們經歷的資料量越來越大、越來越重，運維也越來越重要。有幸參加“GOPS201

python 入門之 – 字串型別及操作方法（十五）

在之前學基本資料型別的時候知道了，在 python 中，字串 是一個有序的字元的集合，用於儲存和表示基本的文字資訊，由一對 單引號 或 雙引號 又或者是 三引號 包含著，但是 字串 有兩個特點： 1、有序 2、不可變 其實字串有序，都很好理解，就是通過語言本身提供的方法來對字串進行一

Appium自動化測試（二）之鍵盤操作pressKeyCode()方法（Android特有）

like driver.pressKeyCode(AndroidKeyCode), 比如HOME，driver.pressKeyCode(AndroidKeyCode.HOME); 下面提供Android keycode參考表： 電話鍵 KEYCODE_CALL 撥號鍵 5

spring4.2.9 java專案環境下ioc原始碼分析（四）——refresh之obtainFreshBeanFactory方法（@2處理Resource、載入Document及解析前準備）

接上篇文章，上篇文章講到載入完返回Rescouce。先找到要解析的程式碼位置，在AbstractBeanDefinitionReader類的loadBeanDefinitions(String location, Set<Resource> actualResou

oracle學習之to_number方法（字串轉數字）

在查詢中排序時避免不了的，一般寫sql我們都會加排序欄位。 如果排序欄位是字串，那就有點麻煩。 比如一個數字欄位，本來應該設計成Integer型的，但設計成了varcher型。 那排序就有問題。數字的話，他會先拍最高位，再拍第2位。 比如8,12降序排序就是8,12而不是

spring4.2.9 java專案環境下ioc原始碼分析（六）——refresh之obtainFreshBeanFactory方法（@4預設標籤bean，beans解析、最終註冊）

接上篇文章，解析了import和alias標籤，只是開胃菜比較簡單，下面介紹bean標籤的載入，也是預設名稱空間下解析的重點。protected void processBeanDefinition(Element ele, BeanDefinitionParserDeleg