AngularJS基礎(chǔ) ng-click 指令示例代碼
更新時(shí)間：2016年08月01日 09:58:34 投稿：lqh
本文介紹AngularJS ng-click 指令,這里整理了ng-click指令的基礎(chǔ)知識(shí)并且附有簡(jiǎn)單示例代碼和實(shí)現(xiàn)效果圖,有需要的小伙伴參考下
AngularJS ng-click 指令
AngularJS 實(shí)例
按鈕每次點(diǎn)擊時(shí)，計(jì)數(shù)變量 count 自動(dòng)加 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
<p>點(diǎn)擊按鈕:</p>
<button ng-click="count = count + 1" ng-init="count=0">OK</button>
<p>按鈕被點(diǎn)擊了 {{count}} 次。</p>
<p>實(shí)例中，按鈕每被點(diǎn)擊一次變量 "count" 會(huì)自動(dòng)加 1。</p>
</body>
</html>
注意：實(shí)例中，按鈕每被點(diǎn)擊一次變量 "count"
定義和用法
ng-click 指令告訴了 AngularJS HTML 元素被點(diǎn)擊后需要執(zhí)行的操作。
語(yǔ)法
<element ng-click="expression"></element>
所有 HTML 元素都支持。
參數(shù)值
| 值 | 描述 |
|---|---|
| expression | 元素被點(diǎn)擊后執(zhí)行的表達(dá)式。 |
以上就是對(duì)AngularJS ng-click 指令的資料整理，后續(xù)繼續(xù)補(bǔ)充，希望能幫助編程AngularJS的朋友。
您可能感興趣的文章:
- Angularjs為ng-click事件傳遞參數(shù)
- angular ng-click防止重復(fù)提交實(shí)例
- AngularJS的ng-click傳參的方法
- 詳解angularJS動(dòng)態(tài)生成的頁(yè)面中ng-click無(wú)效解決辦法
- Angularjs 動(dòng)態(tài)添加指令并綁定事件的方法
- AngularJS中directive指令使用之事件綁定與指令交互用法示例
- Angularjs中使用指令綁定點(diǎn)擊事件的方法
- AngularJs ng-change事件/指令的用法小結(jié)
- Angularjs 事件指令詳細(xì)整理
- Angular使用操作事件指令ng-click傳多個(gè)參數(shù)示例
相關(guān)文章
通常我們需要使用管道實(shí)現(xiàn)對(duì)數(shù)據(jù)的格式化，下面這篇文章主要給大家介紹了關(guān)于Angular中管道操作符(|)的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
本文主要講解AngularJs directive的知識(shí)，這里整理了相關(guān)資料及示例代碼，有興趣的小伙伴可以參考下2016-09-09
Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
這篇文章主要介紹了AngularJS中scope的綁定策略,結(jié)合實(shí)例形式簡(jiǎn)單分析了AngularJS scope的三種綁定模式的使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10
angular5 httpclient的示例實(shí)戰(zhàn)
本篇文章主要介紹了angular5 httpclient的示例實(shí)戰(zhàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
AngularJS整合Springmvc、Spring、Mybatis搭建開(kāi)發(fā)環(huán)境
這篇文章主要介紹了AngularJS整合Springmvc、Spring、Mybatis搭建開(kāi)發(fā)環(huán)境的相關(guān)資料，為學(xué)習(xí)使用AngularJS做好基礎(chǔ)準(zhǔn)備，感興趣的小伙伴們可以參考一下2016-02-02
angularjs過(guò)濾器--filter與ng-repeat配合有奇效
本篇文章主要介紹了angularjs過(guò)濾器-filter與ng-repeat的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例
本篇文章主要介紹了Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
AngularJS變量及過(guò)濾器Filter用法分析
這篇文章主要介紹了AngularJS變量及過(guò)濾器Filter用法,結(jié)合實(shí)例形式分析了AngularJS變量、過(guò)濾器及自定義過(guò)濾器的相關(guān)用法與注意事項(xiàng),需要的朋友可以參考下2016-11-11
AngularJS基礎(chǔ) ng-mousemove 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-mousemove 指令,這里幫大家整理了ng-mousemove 指令的詳細(xì)資料,并附有示例代碼,有需要的朋友參考下2016-08-08