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 相关文章推荐
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
jQuery选择器基础入门教程
May 10 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
浅谈vue-router 路由传参的方法
Dec 27 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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/10/09 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
js 页面执行时间计算代码
2009/03/04 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
python异步任务队列示例
2014/04/01 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
python类和函数中使用静态变量的方法
2015/05/09 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python中强大的format函数实例详解
2018/12/05 Python
pytorch打印网络结构的实例
2019/08/19 Python
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android