angularJS 中input示例分享
更新時間：2015年02月09日 09:52:00 投稿：hebedich
這篇文章主要介紹了angularJS 中input示例分享,需要的朋友可以參考下
這里給大家分享一則input指令的使用示例
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(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有第四個參數(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>
代碼很簡單，小伙伴們自由擴展下，希望大家能夠喜歡
相關(guān)文章
本篇文章給大家介紹在angularjs中自定義一個有關(guān)表格的directive，涉及到angularjs directive相關(guān)知識，對本文感興趣的朋友一起學(xué)習(xí)吧2016-01-01
這篇文章主要介紹了angularjs自定義過濾器,結(jié)合完整實例形式分析了angularjs自定義過濾器相關(guān)原理、使用方法及操作注意事項,需要的朋友可以參考下2019-08-08
Angular2中如何使用ngx-translate進(jìn)行國際化
本篇文章主要介紹了Angular2中使用ngx-translate進(jìn)行國際化，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
解決angular2 獲取到的數(shù)據(jù)無法實時更新的問題
今天小編就為大家分享一篇解決angular2 獲取到的數(shù)據(jù)無法實時更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
如何使用AngularJs打造權(quán)限管理系統(tǒng)【簡易型】
這篇文章主要介紹了使用AngularJs打造權(quán)限管理系統(tǒng)【簡易型】的相關(guān)資料,需要的朋友可以參考下2016-05-05
AngularJS教程之MVC體系結(jié)構(gòu)詳解
本文主要講解AngularJS MVC體系結(jié)構(gòu)，這里提供詳細(xì)的教程供大家學(xué)習(xí)參考，有需要的小伙伴可以參考下2016-08-08
詳解AngularJS中$filter過濾器使用(自定義過濾器)
這篇文章主要介紹了詳解AngularJS中$filter過濾器使用(自定義過濾器)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
詳解Angular的數(shù)據(jù)顯示優(yōu)化處理
本文主要對Angular的數(shù)據(jù)顯示優(yōu)化處理進(jìn)行詳細(xì)介紹，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
angular6?Error:Debug?Failure?at?typeToString解決分析
這篇文章主要為大家介紹了angular6?Error:Debug?Failure?at?typeToString解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定
這篇文章主要介紹了淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07