angularJS 中input示例分享


Posted in Javascript onFebruary 09, 2015

这里给大家分享一则input指令的使用示例

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<script src="http://localhost:81/js/jquery.js">

</script>

<script src="http://localhost:81/js/angular.min.js">

</script>

<body ng-app="Demo">

<div ng-controller="TestCtrl">

    <input type="text" ng-model="a" test />

    <button ng-click="show(a)">查看</button>

</div>

</body>

<script>

   var app = angular.module('Demo', [], angular.noop);

   app.directive('test', function(){<br> //input 指令的 link有第四个参数,$ctrl有些方法,你可以自己拿来用

     var link = function($scope, $element, $attrs, $ctrl){

    console.log( $ctrl )

       $ctrl.$formatters.push(function(value){

         return value.join(',');

       });

       $ctrl.$parsers.push(function(value){

         return value.split(',');

       });

     }

     return {compile: function(){return link},

             require: 'ngModel',

             restrict: 'A'}

   });

   app.controller('TestCtrl', function($scope){

     $scope.a = [];

     //$scope.a = [1,2,3];

     $scope.show = function(v){

       console.log(v);

     }

   });

</script>

</html>

代码很简单,小伙伴们自由扩展下,希望大家能够喜欢

Javascript 相关文章推荐
Javascript 日期处理之时区问题
Oct 08 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
angularJS提交表单(form)
Feb 09 #Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 #Javascript
js选项卡的实现方法
Feb 09 #Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 #Javascript
angularJS中router的使用指南
Feb 09 #Javascript
javascript实现按回车键切换焦点
Feb 09 #Javascript
jquery中ajax使用error调试错误的方法
Feb 08 #Javascript
You might like
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
JSONP跨域请求
2017/03/02 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python3中列表list合并的四种方法
2019/04/19 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python实现五子棋人机对战游戏
2020/03/25 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
护理学专业推荐信
2013/12/03 职场文书
质量月活动总结
2014/08/26 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
高中英语教学反思范文
2016/03/02 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB