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十六进制及二进制转化的方法
May 06 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
实用函数3
2007/11/08 PHP
YII实现分页的方法
2014/07/09 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python之re操作方法(详解)
2017/06/14 Python
Python之web模板应用
2017/12/26 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
劳动工资科岗位职责范本
2014/03/02 职场文书
合作协议书怎么写
2014/04/18 职场文书
医学专业自荐信
2014/06/14 职场文书
工作年限证明模板
2014/11/01 职场文书
亲戚关系证明
2015/06/24 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL