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实现页面打印的三种方法
Mar 05 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
vue使用原生swiper代码实例
Feb 05 Javascript
JavaScript中交换值的10种方法总结
Aug 18 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
微信小程序中使用vant框架的具体步骤
Feb 18 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
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
初步探究Python程序的执行原理
2015/04/11 Python
Python实现提取文章摘要的方法
2015/04/21 Python
python使用folium库绘制地图点击框
2018/09/21 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python调用自定义函数的实例操作
2019/06/26 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
计算机毕业生自荐信
2014/06/12 职场文书
大学生毕业求职信
2014/06/12 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
2014年老干部工作总结
2014/11/21 职场文书
保护环境的宣传语
2015/07/13 职场文书
2015大一新生军训感言
2015/08/01 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python