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(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
原生JavaScript实现换肤
Feb 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
PHP输出缓存ob系列函数详解
2014/03/11 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
js 对象是否存在判断
2009/07/15 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
Three.js基础学习教程
2017/11/16 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
python处理json数据中的中文
2014/03/06 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python pymysql库的常用操作
2020/10/16 Python
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
微观物理专业自荐信
2014/01/26 职场文书
干部鉴定材料
2014/05/18 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
辞职信格式范文
2015/05/13 职场文书
单位更名证明
2015/06/18 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
教你部署vue项目到docker
2022/04/05 Vue.js
Python日志模块logging用法
2022/06/05 Python