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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
python机器学习库常用汇总
2017/11/15 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
django之自定义软删除Model的方法
2019/08/14 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
新教师工作感言
2014/02/16 职场文书
挂牌仪式主持词
2014/03/20 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
2016新年问候语大全
2015/11/11 职场文书