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 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
基于JS实现快速读取TXT文件
Aug 25 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使用反射插入对象示例分享
2014/03/11 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
为原生js Array增加each方法
2012/04/07 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python实现获取某天是某个月中的第几周
2015/02/11 Python
python实现udp传输图片功能
2020/03/20 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
企业车辆管理制度
2014/01/24 职场文书
师生聚会感言
2014/01/26 职场文书
触摸春天教学反思
2014/02/03 职场文书
布达拉宫的导游词
2015/02/02 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle