Skip to content

Instantly share code, notes, and snippets.

@kalbarczyk

kalbarczyk/ngFocus_ngBlur_ngChange.html

Created November 18, 2014 13:50
Show Gist options
  • Save kalbarczyk/bdcaadd81e746989dc5d to your computer and use it in GitHub Desktop.
Save kalbarczyk/bdcaadd81e746989dc5d to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS - dyrektywy ngFocus, ngBlur, ngChange - przykład z naszej książki „AngularJS - Pierwsze kroki”, która ukaże się na początku 2015r. dzięki wydawnictwu Helion.
Raw
ngFocus_ngBlur_ngChange.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
<title>AngularJS - ngClass, ngFocus, ngBlur, ngChange</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<style>
input[type="text"].testFocus {
background-color: green;
}
input[type="text"].testBlur {
background-color: red;
}
</style>
</head>
<body data-ng-controller="defaultCtrl">
<div>
<input type="text" class="form-control"
data-ng-class="{ testFocus: focus, testBlur: blur }"
data-ng-focus="focus=true;blur=false;"
data-ng-blur="blur=true;focus=false;"
data-ng-change="change()"
data-ng-model="testModel"
/>
<p>focus: {{focus}}</p>
<p>blur: {{blur}} </p>
<p>{{testModel}}</p>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script>
<script>
var app = angular.module("app",[])
.controller("defaultCtrl", function ($scope) {
$scope.focus = false;
$scope.blur = false;
$scope.change = function () {
console.log($scope.testModel);
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment