快捷導(dǎo)航

AngularJS中控制器函數(shù)的定義與使用方法示例

更新時(shí)間：2017年10月10日 12:04:22 作者：Zerone1993

這篇文章主要介紹了AngularJS中控制器函數(shù)的定義與使用方法,結(jié)合具體實(shí)例形式分析了AngularJS控制器函數(shù)的定義、綁定及相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS中控制器函數(shù)的定義與使用方法。分享給大家供大家參考，具體如下：

HTML正文:

<body ng-app="myApp" ng-controller="myCtrl">
<h2>AngularJS函數(shù)綁定</h2>
<textarea ng-model="message" cols="40" rows="10"></textarea>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>剩余字?jǐn)?shù): <span ng-bind="left()"></span></p>
<!-- AngualrJS的顯示和隱藏邏輯控制指令：類似avalon中的ms-visible和knockout的visible指令 -->
<div ng-show="flag">
結(jié)果：<font color="red"><span ng-bind="result"></span></font>
</div>

Javascript操作代碼：

/**
 * AngularJS將屬性和函數(shù)直接看作是controller的平等成員，
 * 可以調(diào)用函數(shù)按照普通的屬性的調(diào)用方式即可(knockout avalon 部分Jquery插件也是使用這種方式定義函數(shù))
 */
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.message = "";
  $scope.result="";
  $scope.flag=false;
  $scope.left = function() {return 100 - $scope.message.length;};
  $scope.clear = function() {
    $scope.message = "";
    $scope.result= $scope.message;
    $scope.flag=false;
  };
  $scope.save = function() {
     $scope.result= $scope.message;
     $scope.flag=true;
  };
});

效果：

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Angular CLI 使用教程指南參考小結(jié)
這篇文章主要介紹了Angular CLI 使用教程指南參考小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-04-04
angularjs中回車鍵觸發(fā)某一事件的方法
下面小編就為大家?guī)硪黄猘ngularjs中回車鍵觸發(fā)某一事件的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-04-04
AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法
今天小編就為大家分享一篇AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
angular 服務(wù)隨記小結(jié)
這篇文章主要介紹了angular 服務(wù)隨記小結(jié),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Angular中的Promise對(duì)象($q介紹)
這篇文章主要介紹了Angular中的Promise對(duì)象($q介紹),本文講解了Promise模式、Q Promise的基本用法、AngularJs中的$q.defferd等內(nèi)容,需要的朋友可以參考下
2015-03-03
詳解什么是@ngrx/store開發(fā)包中的MemoizedSelector
這篇文章主要為大家介紹了@ngrx/store開發(fā)包中的MemoizedSelector使用分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-07-07
利用VS Code開發(fā)你的第一個(gè)AngularJS 2應(yīng)用程序
這篇文章主要給大家介紹了關(guān)于利用VS Code如何開發(fā)你的第一個(gè)AngularJS 2應(yīng)用程序的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友下面來一起看看吧。
2017-12-12
AngularJs用戶輸入動(dòng)態(tài)模板XSS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶輸入動(dòng)態(tài)模板XSS攻擊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-04-04
AngularJS基于MVC的復(fù)雜操作實(shí)例講解
下面小編就為大家分享一篇AngularJS基于MVC的復(fù)雜操作實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
AngularJS實(shí)現(xiàn)頁面跳轉(zhuǎn)后自動(dòng)彈出對(duì)話框?qū)嵗a
這篇文章主要介紹了AngularJS實(shí)現(xiàn)頁面跳轉(zhuǎn)后自動(dòng)彈出對(duì)話框?qū)嵗a，然后在文章下面給大家介紹了angularjs頁面加載后自動(dòng)彈窗的實(shí)例代碼，感興趣的朋友參考下吧
2017-08-08