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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
vuex实现购物车功能
Jun 28 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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
初学CAKEPHP 基础教程
2009/11/02 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Python实现高效求解素数代码实例
2015/06/30 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
python matplotlib画图实例代码分享
2017/12/27 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
党员公开承诺书
2014/03/25 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
演讲比赛策划方案
2014/06/11 职场文书
好的促销活动方案
2014/08/21 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
R9700摩机记
2022/04/05 无线电
nginx 添加http_stub_status_module模块
2022/05/25 Servers
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL