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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
1.PHP简介
2006/10/09 PHP
PHP中的替代语法简介
2014/08/22 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
Javascript调用C#代码
2011/01/17 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
Python实现基于POS算法的区块链
2018/08/07 Python
Django中URL的参数传递的实现
2019/08/04 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python常用数据重复项处理方法
2019/11/22 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
新学期家长寄语
2014/01/19 职场文书
人民教师求职自荐信
2014/03/12 职场文书
三八活动策划方案
2014/08/17 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
委托培训协议书
2014/11/17 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
导游词之丽江普济寺
2019/10/22 职场文书