AngularJS中控制器函數(shù)的定義與使用方法示例
更新時間：2017年10月10日 12:04:22 作者：Zerone1993
這篇文章主要介紹了AngularJS中控制器函數(shù)的定義與使用方法,結(jié)合具體實例形式分析了AngularJS控制器函數(shù)的定義、綁定及相關(guān)使用技巧,需要的朋友可以參考下
本文實例講述了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>剩余字數(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入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
您可能感興趣的文章:
- AngularJS控制器controller正確的通信的方法
- 詳解AngularJS控制器的使用
- AngularJS控制器之間的數(shù)據(jù)共享及通信詳解
- AngularJS指令與控制器之間的交互功能示例
- AngularJS控制器之間的通信方式詳解
- AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法
- AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
- AngularJS開發(fā)教程之控制器之間的通信方法分析
- AngularJS中一般函數(shù)參數(shù)傳遞用法分析
- Angularjs中如何使用filterFilter函數(shù)過濾
- angularjs指令中的compile與link函數(shù)詳解
相關(guān)文章
這篇文章主要介紹了淺談angularJS 作用域的相關(guān)資料,需要的朋友可以參考下2015-07-07
AngularJS向后端ASP.NET API控制器上傳文件
這篇文章主要介紹了AngularJS向后端ASP.NET API控制器上傳文件的相關(guān)資料,需要的朋友可以參考下2016-02-02
Angular 1.x個人使用的經(jīng)驗小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 1.x個人使用的一些經(jīng)驗，屬于一些基礎(chǔ)入門教程，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式
本文給大家介紹使用Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式，通過定義一個共享服務service來實現(xiàn)此功能，對angularjs共享數(shù)據(jù)相關(guān)知識感興趣的朋友一起學習2016-03-03
本篇文章主要介紹了angularjs+bootstrap菜單的使用示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定
這篇文章主要介紹了淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
AngularJS基礎(chǔ) ng-keyup 指令簡單示例
本文主要介紹AngularJS ng-keyup 指令,這里對ng-keyup指令的基本資料進行了整理,并且附有代碼示例,有需要的朋友可以看一下2016-08-08
淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容
本篇文章主要介紹了淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容，具有一定的參考價值，有興趣的可以了解一下2017-08-08
本文主要介紹AngularJS 路由與多視圖詳解，這里整理了相關(guān)資料及示例代碼，詳細說明了在開發(fā)過程中如何應用，有興趣的朋友可以看下2016-08-08
這篇文章主要介紹了AngularJS中使用HTML5手機攝像頭拍照的相關(guān)資料,需要的朋友可以參考下2016-02-02