效果图：
完整代码：
<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" />
<title>AngularJS入门学习</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<div class="inputitem">
<md-input-container class="mdic">
<label>the label 1</label>
<input type="text" name="1" ng-model="value">
</md-input-container>
</div>
<div class="inputitem">
<md-input-container class="mdic">
<label>the label 2</label>
<input type="text" name="1" ng-model="value">
</md-input-container>
</div>
</div>
<style>
.inputitem{margin-top: 30px;height: 60px;}
.mdic{position: relative;}
.mdic input,.mdic label{position: absolute;font-size:28px;top:10px;left: 10px;}
.mdic label{z-index: 1;white-space: nowrap;}
.md-input-focused{position: relative;height: 100px;transition: all 0.3s ease-in-out;}
.md-input-focused label{top: -10px;font-size:14px;transition: all 0.3s ease-in-out;}
.md-input-focused input{background: blue;border: 1px solid red;position: absolute;top: 10px;left: 10px;transition: all 0.3s ease-in-out;}
</style>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller("myController", function ($scope) {
$scope.name = "hello world";
});
app.directive("mdInputContainer", function(){
return {
scope: {},
restrict: 'E',
controller: function($scope, $element){
this.setFocused = function(isFocused) {
$element.toggleClass('md-input-focused', !!isFocused);
};
this.setHasValue = function(hasValue) {
$element.toggleClass('md-input-has-value', !!hasValue);
};
}
};
});
app.directive("input",function(){
return {
scope: {},
restrict: 'E',
require: '^mdInputContainer',
link: function(scope, elem, attrs, controllerInstance){
var el = angular.element(elem)
var self = this;
el
.on('focus', function(ev) {
controllerInstance.setFocused(true);
})
.on('blur', function(ev) {
controllerInstance.setFocused(false);
});
}
};
});
</script>
</html>
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
