angularJS 中input示例分享
這里給大家分享一則input指令的使用示例
<!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有些方法,你可以自己拿來(lái)用
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)文章
AngularJS中的Directive自定義一個(gè)表格
本篇文章給大家介紹在angularjs中自定義一個(gè)有關(guān)表格的directive,涉及到angularjs directive相關(guān)知識(shí),對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2016-01-01
Angular2中如何使用ngx-translate進(jìn)行國(guó)際化
本篇文章主要介紹了Angular2中使用ngx-translate進(jìn)行國(guó)際化,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
解決angular2 獲取到的數(shù)據(jù)無(wú)法實(shí)時(shí)更新的問(wèn)題
今天小編就為大家分享一篇解決angular2 獲取到的數(shù)據(jù)無(wú)法實(shí)時(shí)更新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
如何使用AngularJs打造權(quán)限管理系統(tǒng)【簡(jiǎn)易型】
這篇文章主要介紹了使用AngularJs打造權(quán)限管理系統(tǒng)【簡(jiǎn)易型】的相關(guān)資料,需要的朋友可以參考下2016-05-05
AngularJS教程之MVC體系結(jié)構(gòu)詳解
本文主要講解AngularJS MVC體系結(jié)構(gòu),這里提供詳細(xì)的教程供大家學(xué)習(xí)參考,有需要的小伙伴可以參考下2016-08-08
詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)
這篇文章主要介紹了詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
詳解Angular的數(shù)據(jù)顯示優(yōu)化處理
本文主要對(duì)Angular的數(shù)據(jù)顯示優(yōu)化處理進(jìn)行詳細(xì)介紹,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2016-12-12
angular6?Error:Debug?Failure?at?typeToString解決分析
這篇文章主要為大家介紹了angular6?Error:Debug?Failure?at?typeToString解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
淺談Angularjs中不同類(lèi)型的雙向數(shù)據(jù)綁定
這篇文章主要介紹了淺談Angularjs中不同類(lèi)型的雙向數(shù)據(jù)綁定,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07

