Skip to content

Instantly share code, notes, and snippets.

@ronihcohen

ronihcohen/A-Pen-by-Ronny.markdown

Created January 30, 2014 14:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ronihcohen/8710139 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ronihcohen/8710139 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Ronny.
Raw
index.html
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="[email protected]" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="http://code.angularjs.org/1.2.10/angular.js" data-semver="1.2.10"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form" role="form" novalidate="">
<div class="row">
<div class="col-xs-4">
<div class="form-group" ng-class="{'has-error': form.uName.$invalid, 'has-success': !form.uName.$invalid}">
<label for="uName ">User Name</label>
<input type="text " class="form-control " name="uName " placeholder="User Name " ng-model="user.name " required=" " />
<div class="err_tip " ng-show="form.uName.$dirty && form.uName.$invalid ">
<span ng-show="form.uName.$error.required ">User name is required.</span>
</div>
</div>
</div>
<div class="col-xs-4 ">
<div class="form-group " ng-class="{ 'has-error': form.uEmail.$invalid, 'has-success': !form.uEmail.$invalid}">
<label for="uEmail">Email address</label>
<input type="email" class="form-control" name="uEmail" placeholder="Enter email" ng-model="user.email" required="" />
<div class="err_tip" ng-show="form.uEmail.$dirty && form.uEmail.$invalid">
<span ng-show="form.uEmail.$error.required">This field is required.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group" ng-class="{'has-error': form.uPass.$invalid, 'has-success': !form.uPass.$invalid}">
<label for="uPass ">Password</label>
<input type="text " class="form-control"=n name="uPass" placeholder="Password " ng-model="user.pass " required=" " />
<div class="err_tip " ng-show="form.uPass.$dirty && form.uPass.$invalid ">
<span ng-show="form.uPass.$error.required ">Password is required.</span>
</div>
</div>
</div>
<div class="col-xs-4 ">
<div class="form-group " ng-class="{ 'has-error': form.uPassConf.$invalid, 'has-success': !form.uPassConf.$invalid}">
<label for="uPassConf">Confirm Password</label>
<input type="text" class="form-control" name="uPassConf" placeholder="Confirm Password" ng-model="user.passconf" required="" password-match="user.pass" />
<div class="err_tip" ng-show="form.uPassConf.$dirty && form.uPassConf.$invalid">
<span ng-show="form.uPassConf.$error.required">This field is required.</span>
<span ng-show="form.uPassConf.$error.unique">Password does not match the confirm password.</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group " ng-class="{ 'has-error': form.uSecQuest.$invalid, 'has-success': !form.uSecQuest.$invalid}">
<label for="uSecQuest">Security Questions</label>
<select class="form-control" ng-model="user.secquest" name="uSecQuest" required="">
<option value=""></option>
<option ng-repeat="quest in questions" value="{{ quest.id }}">{{ quest.quest }}</option>
</select>
</div>
</div>
</div>
<button class="btn" ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)" ng-class="{'btn-danger': form.$invalid, 'btn-success': !form.$invalid } ">Submit</button>
</form>
<br/>
</button>
<h2>Var dump</h1>
<div class="row ">
<div class="col-xs-8 ">
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
<pre>http status code: {{status}}</pre>
</div>
</div>
</body>
</html>
Raw
script.js
'use strict';
var app = angular.module('plunker', ['ngAnimate']);
/* Controllers */
function MainCtrl($scope, $http) {
$scope.master = {
name: "Ronny"
};
$scope.update = function(user) {
$scope.master = angular.copy(user);
$scope.fetch();
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.isUnchanged = function(user) {
return angular.equals(user, $scope.master);
};
$scope.reset();
$scope.method = 'JSONP';
$scope.url ='http://www.mocky.io/v2/52ea5a9a7cf0cd6806540819?callback=JSON_CALLBACK';
$scope.fetch = function() {
$scope.code = null;
$scope.response = null;
// cache set to false for IE
var httpHeaders = { 'If-Modified-Since': "0" };
// Data sent to the server
var myParams = {a:"q",did:"1",l:"ja-jp"};
$http({
method: $scope.method,
url: $scope.url,
cache: false,
headers: httpHeaders,
params: myParams
}).
success(function(data, status) {
$scope.status = status;
$scope.questions = data.questions;
}).
error(function(data, status) {
$scope.questions = data.questions || "Request failed";
$scope.status = status;
});
};
$scope.fetch();
};
/* Directives */
app.directive('passwordMatch', [
function() {
return {
restrict: 'A',
scope: true,
require: 'ngModel',
link: function(scope, elem, attrs, control) {
var checker = function() {
//get the value of the first password
var e1 = scope.$eval(attrs.ngModel);
//get the value of the other password
var e2 = scope.$eval(attrs.passwordMatch);
return e1 == e2;
};
scope.$watch(checker, function(n) {
//set the form control to valid if both
//passwords are the same, else invalid
control.$setValidity("unique", n);
});
}
};
}
]);
Raw
style.css
body{
margin:20px;
}
.err_tip {
position: absolute;
bottom: 50px;
right: 0px;
width: 200px;
background-color: #DA362A;
color: white;
padding: 2px;
border-radius: 16px;
box-shadow: 3px 3px 10px #888888;
margin: 5px;
text-align: center;
border: 2px solid #000000;
z-index: 1;
}
.err_tip:after, .err_tip:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.err_tip:after {
border-color: rgba(218, 54, 42, 0);
border-top-color: #DA362A;
border-width: 10px;
margin-left: -10px;
}
.err_tip:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: #000000;
border-width: 13px;
margin-left: -13px;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
display:block!important;
}
.animate-show {
-webkit-transition:all 0.3s;
transition:all 0.3s;
opacity:1;
}
.animate-show.ng-hide {
opacity:0;
}
.form-control {
border: 2px solid #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment