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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
Prototype Hash对象 学习
Jul 19 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
js Event对象的5种坐标
Sep 12 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
vue组件添加事件@click.native操作
Oct 30 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
解析jquery获取父窗口的元素
2013/06/26 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
python 使用get_argument获取url query参数
2017/04/28 Python
Python打印输出数组中全部元素
2018/03/13 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
python实现手机销售管理系统
2019/03/19 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Python递归函数特点及原理解析
2020/03/04 Python
python之随机数函数的实现示例
2020/12/30 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
给面试官的感谢信
2014/02/01 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
宣传活动总结范文
2014/07/01 职场文书
员工安全责任协议书
2016/03/22 职场文书