angularJS 中input示例分享
更新時(shí)間：2015年02月09日 09:52:00 投稿：hebedich
這篇文章主要介紹了angularJS 中input示例分享,需要的朋友可以參考下
這里給大家分享一則input指令的使用示例
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</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有第四個(gè)參數(shù)，$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>
代碼很簡(jiǎn)單，小伙伴們自由擴(kuò)展下，希望大家能夠喜歡
相關(guān)文章
本文主要介紹了手動(dòng)初始化Angular的模塊與控制器的方法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了詳解Angular如何正確的操作DOM，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
AngularJS 文件上傳控件 ng-file-upload詳解
這篇文章主要介紹了AngularJS 文件上傳控件 ng-file-upload詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了AngularJS 彈出框 $modal，大家都知道open是$modal唯一方法，通過本文給大家列出了該方法的屬性。對(duì)angularjs彈出框知識(shí)感興趣的朋友一起看下吧2016-08-08
這篇文章主要介紹了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人氣JavaScript庫(kù),需要的朋友可以參考下2015-06-06
Angular的$http的ajax的請(qǐng)求操作（推薦）
這篇文章主要介紹了Angular的$http的ajax的請(qǐng)求操作的相關(guān)資料,需要的朋友可以參考下2017-01-01
angularjs 動(dòng)態(tài)從后臺(tái)獲取下拉框的值方法
今天小編就為大家分享一篇angularjs 動(dòng)態(tài)從后臺(tái)獲取下拉框的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
AngularJS+bootstrap實(shí)現(xiàn)動(dòng)態(tài)選擇商品功能示例
這篇文章主要介紹了AngularJS+bootstrap實(shí)現(xiàn)動(dòng)態(tài)選擇商品功能,涉及AngularJS指令、事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-05-05
AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法,結(jié)合具體實(shí)例形式分析了AngularJS自定義指令的實(shí)現(xiàn)以及與控制器數(shù)據(jù)交互的操作技巧,需要的朋友可以參考下2017-06-06
Angular實(shí)現(xiàn)的自定義模糊查詢、排序及三角箭頭標(biāo)注功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的自定義模糊查詢、排序及三角箭頭標(biāo)注功能,涉及AngularJS針對(duì)頁(yè)面table元素的遍歷、查詢、判斷、排序等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12