AngularJS中控制器函数的定义与使用方法示例


Posted in Javascript onOctober 10, 2017

本文实例讲述了AngularJS中控制器函数的定义与使用方法。分享给大家供大家参考,具体如下:

HTML正文:

<body ng-app="myApp" ng-controller="myCtrl">
<h2>AngularJS函数绑定</h2>
<textarea ng-model="message" cols="40" rows="10"></textarea>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>剩余字数: <span ng-bind="left()"></span></p>
<!-- AngualrJS的显示和隐藏逻辑控制指令:类似avalon中的ms-visible和knockout的visible指令 -->
<div ng-show="flag">
结果:<font color="red"><span ng-bind="result"></span></font>
</div>

Javascript操作代码:

/**
 * AngularJS将属性和函数直接看作是controller的平等成员,
 * 可以调用函数按照普通的属性的调用方式即可(knockout avalon 部分Jquery插件也是使用这种方式定义函数)
 */
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;
  };
});

效果:

AngularJS中控制器函数的定义与使用方法示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
JS Attribute属性操作详解
May 19 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
jQuery实现简单全选框
Sep 13 jQuery
JavaScript实现计数器基础方法
Oct 10 #Javascript
JS实现合并json对象的方法
Oct 10 #Javascript
jQuery实现的form转json经典示例
Oct 10 #jQuery
JS实现websocket长轮询实时消息提示的效果
Oct 10 #Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 #Javascript
vue.js实现简单轮播图效果
Oct 10 #Javascript
seajs中最常用的7个功能、配置示例
Oct 10 #Javascript
You might like
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
php 可变函数使用小结
2018/06/12 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
js数组的操作详解
2013/03/27 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
解决python中导入win32com.client出错的问题
2019/07/26 Python
基于Python解密仿射密码
2019/10/21 Python
什么是SCM(软件配置管理)
2014/08/16 面试题
个人简历中的自我评价怎么写
2014/01/26 职场文书
预备党员表决心书
2014/03/11 职场文书
伊琍体标语
2014/06/25 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
元宵节晚会主持词
2015/07/01 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
2019个人半年工作总结
2019/06/21 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
MySQL 数据类型详情
2021/11/11 MySQL
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
canvas 中如何实现物体的框选
2022/08/05 Javascript