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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
编程语言JavaScript简介
Oct 16 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
Vue实现购物车基本功能
Nov 08 Javascript
vue+element实现动态加载表单
Dec 13 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
学习使用PHP数组
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
Python实现句子翻译功能
2017/11/14 Python
图解Python变量与赋值
2018/04/03 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python主线程捕获子线程的方法
2018/06/17 Python
python制作填词游戏步骤详解
2019/05/05 Python
Python双链表原理与实现方法详解
2020/02/22 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
德国电子商城:ComputerUniverse
2017/04/21 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
洗发露广告词
2014/03/14 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
婚礼答谢词
2015/01/04 职场文书
《风筝》教学反思
2016/02/23 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
Python闭包的定义和使用方法
2022/04/11 Python