AngularJS Form Validation and processing data

Requirements

• Text field is  required, minimum length 3, maximum length 200
• DueDate is  required, has to be a valid

Property	Class	Description
$valid	ng-valid	Boolean Tells whether an item is currently valid based on the rules you placed.
$invalid	ng-invalid	Boolean Tells whether an item is currently invalid based on the rules you placed.
$pristine	ng-pristine	Boolean True if the form/input has not been used yet.
$dirty	ng-dirty	Boolean True if the form/input has been used.

Accessing Angular Form Properties

• To access the form: <form name>.<angular property>
• To access an input: <form name>.<input name>.<angular property>

<form name=”form” class=”form-horizontal” ng-submit=”submitForm(form.$valid)” novalidate><!– novalidate prevents HTML5 validation since we will be validating ourselves –>
<div class=”form-group” ng-class=”{ ‘has-error’ : form.Text.$invalid && !form.Text.$pristine }”>
<label>Todo</label>
<input type=”text” ng-model=”item.Text” id=”Text” name=”Text” class=”form-control” placeholder=”” ng-minlength=”3″ ng-maxlength=”200″ required>
<p ng-show=”form.Text.$invalid && !form.Text.$pristine” class=”help-block”>Todo is required.</p>
<p ng-show=”form.Text.$error.minlength” class=”help-block”>Must great then list 3 characters.</p>
<p ng-show=”form.Text.$error.maxlength” class=”help-block”>Must less then 200 characters.</p>
</div>

<div class=”form-group” >
<label>Priority</label>
<input type=”number” ng-model=”item.Priority” id=”Priority” class=”form-control” name=”Priority” placeholder=””>

</div>

<div class=”form-group” ng-class=”{ ‘has-error’ : form.DueDate.$invalid && !form.DueDate.$pristine }”>
<label>DueDate</label>
<input type=”text” ng-model=”item.DueDate” id=”DueDate” name=”DueDate” class=”form-control” placeholder=”” required>
<p ng-show=”form.DueDate.$invalid && !form.DueDate.$pristine” class=”help-block”>DueDate is required.</p>
</div>
<div class=”form-group”>

<button type=”submit” class=”btn btn-primary” ng-disabled=”userForm.$invalid”>{{action}}</button>
<a href=”#/” class=”btn”>Cancel</a>
</div>
</form>

I have CreateCtrl in my app.js then

var CreateCtrl = function ($scope, $location, Todo) {
$scope.action = “Add”;
//function to submit the form after all validation has occurred
$scope.submitForm = function (isValid) {
// check to make sure the form is completely valid
if (isValid) {
//then could create a new Todo

Todo.save($scope.item, function () {
$location.path(‘/’);
});
}
};
};

For the whole app source code go to here:

https://github.com/sandywebdesigner/AngularJsApp

here is what will look like:

How to customize your own directive in AngularJs

AngularJS directives are what controls the rendering of the HTML inside an AngularJS application.Example of directives are the interpolation directives({{}}),the ng-repeat directive and ng-if directive.
And you also could write your own directive.

Here is a simple examle, you html code:

<greet from=”Sandy” to=”audience”></greet>

here is your directive code:

MyApp.directive(‘greet’, function () {
return {
scope: true,
restrict : ‘E’, /* restrict this directive to elements */
template: ‘<h2>Greeting from {{from}} to my dear {{to}}</h2>’,
controller: function ($scope, $element, $attrs) {
$scope.from = $attrs.from;
$scope.to = $attrs.to;
}
};
});

You output is:

Another example I’ve used in my TodoApp example, for the source code could go to here find it.

https://github.com/sandywebdesigner/AngularJsApp

TodoApp.directive(‘sorted’, [function () {
return {
scope: true,
restrict: ‘A’,  /* using ‘A’, when you have <div my-directive></div> in the html. */
transclude: true,
template: ‘<a class=”btn btn-link” ng-click=”do_sort()” ng-transclude></a>’ +
‘<span ng-show=”do_show(true)”>’ +
‘<i class=”glyphicon glyphicon-arrow-down”></i>’ +
‘</span>’ +
‘<span ng-show=”do_show(false)”>’ +
‘<i class=”glyphicon glyphicon-arrow-up”></i>’ +
‘</span> ‘,
controller: function ($scope, $element, $attrs) {
$scope.sort_by = $attrs.sorted;
$scope.do_sort = function() {
$scope.sort($scope.sort_by);
};
$scope.do_show = function(is_desc) {
return (is_desc != $scope.is_desc && $scope.sort_order == $scope.sort_by)
}
}
};
}]);

JQuery tutorial –- Effect — Part 4

1. Animating

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Animating an Element</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#right”).click(function() {
$(“#theDiv”).animate({ width: “500px” }, 1000);
});
$(“#text”).click(function() {
$(“#theDiv”).animate({ fontSize: “24pt” }, 1000);
});
$(“#toggle”).click(function() {
$(“#theDiv”).animate({ left: “500” }, 1000, “swing”);
});
});
</script>
<style type=”text/css”>
div#theDiv {
position:relative;
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: cyan;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
Animating an Element</p>
<div id=”theDiv”>Animate Me</div>
<button id=”right”>Grow Right</button>
<button id=”text”>Big Text</button>
<button id=”toggle”>Move Div</button>
</body>
</html>

2. fading

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Element Fading</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#fadein”).click(function() {
$(“#theDiv”).fadeIn(“normal”);
});
$(“#fadeout”).click(function() {
$(“#theDiv”).fadeOut(“normal”);
});
$(“#fadeto3”).click(function() {
$(“#theDiv”).fadeTo(“slow”, 0.3);
});
$(“#fadeup”).click(function() {
$(“#theDiv”).fadeTo(“slow”, 1.0);
});
});
</script>
<style type=”text/css”>
div#theDiv {
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
Fading an Element</p>
<div id=”theDiv”>
</div>
<button id=”fadein”>Fade In</button>
<button id=”fadeout”>Fade Out</button>
<button id=”fadeto3″>Fade To .3</button>
<button id=”fadeup”>Fade To 1.0</button>
</body>
</html>

3.Sliding, Show and hide

$(function() {
$(“#slideup”).click(function() {
$(“#theDiv”).slideUp(“normal”);
});
$(“#slidedown”).click(function() {
$(“#theDiv”).slideDown(“normal”);
});
$(“#toggle”).click(function() {
$(“#theDiv”).slideToggle(“slow”);
});

$(“#show”).click(function() {
$(“#theDiv”).show(“normal”);
});
$(“#hide”).click(function() {
$(“#theDiv”).hide(“normal”);
});
$(“#toggle”).click(function() {
$(“#theDiv”).toggle(“slow”);
});
});

4.Images rotating

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Image Rotator</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
// create the image rotator
setInterval(“rotateImages()”, 2000);
});

function rotateImages() {
var oCurPhoto = $(‘#photoShow div.current’);
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $(‘#photoShow div:first’);

oCurPhoto.removeClass(‘current’).addClass(‘previous’);
oNxtPhoto.css({ opacity: 0.0 }).addClass(‘current’).animate({ opacity: 1.0 }, 1000,
function() {
oCurPhoto.removeClass(‘previous’);
});
}
</script>
<style type=”text/css”>
#photoShow {
height:400px;
width:400px;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
</style>
</head>
<body>
<h1>
jQuery-based Image Rotator</h1>
<div id=”photoShow”>
<div class=”current”>
<img src=”images/Grass.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Leaf.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Spring.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Water.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
</div>
</body>
</html>

JQuery tutorial – Events — Part 3

1. mouseover mouseleave event

$(function() {
$(“#evtTarget”).on(“mouseover mouseleave”, highlight);
$(“#evtTarget”).on(“click”, function(evt) {
$(“#evtTarget”).off(“mouseover mouseleave”, highlight);
$(“#evtTarget”).html(“<p>You shut off the hover effect!</p>”);
});
});

function highlight(evt) {
$(“#evtTarget”).toggleClass(“highlighted”);
}

2.Using jQuery to find the dive position

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Using the jQuery Event Object</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“div”).click(function(evt) {
$(this).html(“pageX: ” + evt.pageX + “, pageY: ” + evt.pageY + “, type: ” + evt.type + “, target: ” +
evt.target);
});
});
</script>
<style type=’text/css’>
.normal {
width:300px;
height:200px;
background-color: Silver;
font-size:18pt;
margin:5pt 5pt 5pt 5pt;
}
</style>
</head>
<body>
<h1>Using the jQuery Event Object</h1>
<div id=”Div1″ class=”normal”>Click on this div (Div1) to see the event information</div>
<div id=”Div2″ class=”normal”>Click on this div (Div2) to see the event information</div>
<div id=”Div3″ class=”normal”>Click on this div (Div3) to see the event information</div>
</body>
</html>

3. more mouse relative event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Using Event Helpers</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#evtTarget”).hover(highlight, highlight);

$(“#evtTarget”).click(fnClick1);
$(“#evtTarget”).dblclick(fnClick2);
});

function highlight(evt) {
$(“#evtTarget”).toggleClass(“highlighted”);
}
function fnClick1() {
$(“#evtTarget”).html(“Click!”);
}
function fnClick2() {
$(“#evtTarget”).html(“Double Click!”);
}
</script>
<style type=’text/css’>
.normal {
width:300px;
height:200px;
background-color:Yellow;
font-size:18pt;
}

.highlighted {
background-color:Red;
}
</style>
</head>
<body>
<h1>Using Event Helpers</h1>
<div id=”evtTarget” class=”normal”>Mouse over this div to see the effect. Click on it to change the content.</div>
</body>
</html>

4. div click event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Miscellaneous jQuery Events</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“div”).one(“click”, function() {
$(this).css({ background: “red”,
cursor: “auto”
});
});
});
</script>
<style type=”text/css”>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p {
font-size: 18pt;
}
</style>
</head>
<body>
<p>
Click on each square to change color</p>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>

5. table working with event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Striping/Hover Highlighting a Table</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#theList tr:even”).addClass(“stripe1”);
$(“#theList tr:odd”).addClass(“stripe2”);

$(“#theList tr”).hover(
function() {
$(this).toggleClass(“highlight”);
},
function() {
$(this).toggleClass(“highlight”);
}
);

$(“#theList”).on(“click”, “tr”, function showText (evt) {
alert($(this).text());
})
});
</script>
<style type=”text/css”>
th,td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width:200px;
padding:3px;
}
th {
background-color:#D2E0E8;
color:#003366
}
table {
border: 1pt solid gray;
}
.clickable {
cursor:pointer;
}
.stripe1 {
background-color:#0f0;
}
.stripe2 {
background-color:#afa;
}
.highlight {
background-color: #ffcc00;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Using jQuery to stripe and hover-highlight a table</h1>
<table id=”theList”>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1.99</td>
</tr>
<tr>
<td>Eggs</td>
<td>2.29</td>
</tr>
<tr>
<td>Butter</td>
<td>3.49</td>
</tr>
<tr>
<td>Bread</td>
<td>0.99</td>
</tr>
<tr>
<td>Pasta</td>
<td>1.19</td>
</tr>
<tr>
<td>Honey</td>
<td>4.39</td>
</tr>
<tr>
<td>Cookies</td>
<td>2.99</td>
</tr>
<tr>
<td>Apples</td>
<td>0.59</td>
</tr>
<tr>
<td>Sugar</td>
<td>1.78</td>
</tr>
<tr>
<td>Pepper</td>
<td>1.56</td>
</tr>
</tbody>
</table>
</body>
</html>

JQuery tutorial – manipulating— Part 2

3. Manipulating tags,  how .html(), wrap and inert works

$(“document”).ready(function() {
//$(“a”).attr(“target”, “_blank”);
//$(“a”).removeAttr(“href”);
//$(“img”).attr({ src: “images/Spring.jpg”, alt: “spring” });

//alert($(“#list1”).html());
// change the html of the UL
//$(“#list1”).html(“<li>This is a new item</li>”);
// create a new p set the content of para2 to the new p
//var newItem = $(“<p>This is a new paragraph</p>”);
//$(“#para2”).html(newItem.html());
// set the text content of the last paragraph
//$(“p:last”).text(“this is the last paragraph”);

//$(“p”).append(” with some content appended”);
//$(“p”).prepend(“Hello! “);
//$(“p:last”).appendTo(“p:first”);
//$(“p:last”).prependTo(“p:first”);

//$(“p”).wrap(“<div style=’color:red’/>”);
//$(“p”).wrapAll(“<div style=’border:3px solid red’/>”);
//$(“ul”).empty();
});

4.Using jQuery manipulating CSS

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery CSS Sizing and Positioning</title>
<script type=”text/javascript” src=”/jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#height”).html($(“#theDiv”).height());
$(“#width”).html($(“#theDiv”).width());
$(“#innerH”).html($(“#theDiv”).innerHeight()); //this will add the padding
$(“#innerW”).html($(“#theDiv”).innerWidth());
$(“#outerH”).html($(“#theDiv”).outerHeight()); // this will subtract the border and margion
$(“#outerW”).html($(“#theDiv”).outerWidth());
$(“#offset”).html($(“#theDiv”).offset().top + “, ” + $(“#theDiv”).offset().left);
$(“#position”).html($(“#theDiv”).position().top + “, ” + $(“#theDiv”).position().left);
});
</script>
<style type=”text/css”>
div#theDiv {
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
</style>
</head>
<body>
<p>
Using jQuery to compute element size and position</p>
<div id=”theDiv”>
</div>
<div><span>Height: </span><span id=”height”></span></div>
<div><span>Width: </span><span id=”width”></span></div>
<div><span>innerHeight: </span><span id=”innerH”></span></div>
<div><span>innerWidth: </span><span id=”innerW”></span></div>
<div><span>outerHeight: </span><span id=”outerH”></span></div>
<div><span>outerWidth: </span><span id=”outerW”></span></div>
<div><span>offset: </span><span id=”offset”></span></div>
<div><span>position: </span><span id=”position”></span></div>
</body>
</html>

5. Manipulating Data

<!DOCTYPE html>
<html>
<head>
<title>Using the Data Methods</title>
<style type=”text/css”>
#div1 {
width: 200px;
height: 100px;
background-color: blue;
color: white;
display: inline-block;
}
</style>
<script type=”text/javascript” src=”/jquery-1.9.1.js”></script>
<script>
$(“document”).ready(function() {
$(“#store”).click(function () {
// store some arbitrary data on the DIV object
$(“#div1”).data(“key1”, 1234);
$(“#div1”).data(“key2”, “Joe Marini”);
});

$(“#remove”).click(function () {
// clear the data from the DIV
$(“#div1”).removeData();
});

$(“#show”).click(function () {
// if there is any data, display it
// alert($(“#div1”).data(“key1”));
// alert($(“#div1”).data(“key2”));

alert(JSON.stringify($(“#div1″).data(), null, ”  “));
});
});
</script>
</head>
<body>
<h1>Using the Data Methods</h1>
<p>jQuery can associate arbitrary data with page elements. Use the controls below to exercise the data() and removeData() functions.</p>
<div id=”div1″ data-key3=”data attribute”>Sample DIV</div>
<p>
<button id=”store”>Click to store data</button>&nbsp;
<button id=”remove”>Click to remove data</button>&nbsp;
<button id=”show”>Click to show data</button></p>
</body>
</html>

JQuery tutorial –set up and retrive — Part 1

1. Set up

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>First jQuery-Enabled Page</title>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function() {
alert(“The page just loaded!”);
});
</script>
</head>
<body>

</body>
</html>

2.basic retrieving

$("document").ready(function() {
        //$("p[class]").css("border", "3px solid red"); // paragraph has define class
        //$("p[id=para1]").css("border", "3px solid red");//paragraph has id named para1
        //$("p[id^=para]").css("border", "3px solid red");//paragraph has id name start with para
        //$("p[id^=para][lang*=en-]").css("border", "3px solid red");//paragraph has id name started with para //and has attribute lang follow with anything or not and = en- 
     $("li a[href$='.pdf']").after("");
//li has a and end with .pdf then add a img to it
//$("p:first").css("border", "3px solid red");
        //$("p:last").css("border", "3px solid red");
        //$("p:even").css("border", "3px solid red");
        //$("p:odd").css("border", "3px solid red");
        //$(".a:first").css("border", "3px solid red");
        //$(".b:even").css("border", "3px solid red");
        //$("p:gt(1)").css("border","3px solid red");
        //$("p:not(p:eq(2))").css("border", "3px solid red");
        //$("p").css("border", "3px solid red");
        //$(".a").css("border", "3px solid red");
        //$("#list1").css("border", "3px solid red");
        //$("p.b").css("border", "3px solid red");
        //$("p:contains(3)").css("border", "3px solid red");
        //$("p:parent").css("border", "3px solid red");
        //$("ul:has(li[class=a])").css("border", "3px solid red");
        //$("ul li:nth-child(3)").css("border", "3px solid red");
        //$("ul li:nth-child(2n)").css("border", "3px solid red");
        //$("form :input").css("border", "3px solid red");
        //$("form :text").css("border", "3px solid red");
        //$("form :text:enabled").css("border", "3px solid red");
        //$("form :checked").css("border", "3px solid red");
        //$("form :checkbox:checked").css("border", "3px solid red");
        //$("p,li.b").css("border", "3px solid red");
        //$("ul li.a").css("border", "3px solid red");
        //$("ul + p").css("border", "3px solid red");
        //$("#list1 ~ p").css("border", "3px solid red");
       // Inspect the length and size() of a result set
        alert("There are " + $("p").length + "elements");

        // use the get() and get(index) to retrieve DOM elements
        var elems = $("li").get();
        alert("There are " + elems.length + "tags");
        alert($("li").get(0));

        // use the find function
        $("ul").find("li.b").css("border", "3px solid red");

        // use the each function
        var leftmargin = 0;
        var border = 3;
        $("p").each(function() {
            $(this).css("border", border+"px solid red");
            $(this).css("margin-left", leftmargin);
            border += 2;
            leftmargin += 10;
        });

    });