Angular Cheat Sheet

                                      

Allow only numeric data

<input id="primaryLocationNumber" ng-model="PrimaryLocationId" type="number" class="form-control" />

Set initial selected value

CSS Implement Image loading on ajax call

                    Implement Image loading on ajax call

When we have a long awaiting ajax call we would like to disable any click events from the user. We can achieve this as shown below.

• we need an div tag
• Gif loading image
• Css class
• Javascript to show and hide the div and image

html 

We can have this image on the top of all the html tags

CSS cheat sheet

Remove default bullets from unordered list

#notepad li { list-style: none; 

}

Text-Align

.panel{
   text-align: center;
}

Border Radius
border-radius: 14px;


Align table to center within a div (responsive)

table {
   margin:0 auto;
}

Adjust left and right margin

.panel{
   margin-right:auto;

   margin-left:auto;

}

Class with round edges

.mainBody{
 
    margin: 100px 250px;
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 1303px;
    height: 703px;
   
}

Hover effect in table selection
.table>tbody>tr:hover {
        background: #99B2E6 !important;

    }

Specify font-awesome styles for specific div
#notepad li .fa-ban:before {
    color: #FA0A26;
    padding-right: 0px;
    margin-left: -41px;
}
Add vertical line

.vertical-line {
     border-left:1px solid #47473D;

 }

Add shadow box

Edit in plunker

div { width: 300px; height: 100px; 

        background-color: yellow; 
       box-shadow: 10px 10px 5px #888888; }

 Text Transform

.text-change
{
text-transform: none;
}
.text-change
{
text-transform: capitalize;
}
.text-change
{
text-transform: uppercase;
}
.text-change
{
text-transform: lowercase;
}

Pointed Cursur

<span style="cursor:pointer">pointer</span><br>

Specify styles to multiple tag

input[type=text],input[type=password],textarea
{ 
width:150px;
}

Display html as block 

span#mySpan {display:block; }

Borders for div

container{
    background-color:#ccc;
    height: 200px;
    width:200px;
     border-color: #000;
     border-style: solid
    }

Hide text overflow with ellipses

Borders for div

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

CSS Notepad

                              CSS Notepad

Using css class to generate notepad skin

Edit in Plunker
CSS

Angular Sorting table

                     

We can easily implement sorting functionality in a table as shown below. 

• On ng-click we need to perform sort operation on the selected column
• We need to use ng-show to show the image
• We need to specify the order by in ng-repeat directive
• Need a java script function for reverse as shown below

Edit in plunker

Angular ng-disabled

       

ng-disabled :binds AngularJS application data to the disabled attribute of HTML elements.

Edit in plunker

Html

Angular ng-hide

                            
ng-hide : Shows or hides the given HTML element based on the expression provided to the ngHide attribute.This helps when creating Angular apps since our single page applications will most likely have many moving parts that come and go as the state of our application changes

The great part about these directives is that we don’t have to do any of the showing or hiding ourselves with CSS or JavaScript.

ex as shown below: If firstname model has values last name is shown.

Edit in plunkr

Angular ng-options set selected value

        

We can set the default value for ng-options as shown below

Html

Angular UI-Select Clear

                          

When we are using UI-Select  we need to reset the selected Item. 

We can achieve this by using

Html

Angular UI-Select custom filters

We can filter the data in UI-Select from remote server. 

Need: We do not want to load all the data locally . Performance would be better

Html

Angular selected event for UI-Select

  This is how we can call a function based on the selected item from the UI-Select directive.

Note : By default if we use the select.css file there is an issue with text overflow when selected.
This can be resolved by adding the following style sheets at the bottom

Entity FrameWork Add Edmx

                            Entity FrameWork Add Edmx

Quick reference for adding edmx file.

Step 1

Step 2

Step 3

 Step 4

 Step 5

Draggable diablog

                            Draggable dialog using JQuery UI

• We need to reference Jquery and Jquery UI
• In the script we need to specify modal as draggable as shown below

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Model Pop up</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/Custom-jquery-ui.min.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet"/>
    <script src="Scripts/bootstrap.min.js"></script>
    </head>
<body>
<div class="side-menu" id="sideMenu">
    <menu>
        <ul class="nav nav-tabs nav-stacked">
            <li>
                <a href="#myModal" data-backdrop="true" data-toggle="modal">Click Me</a>
            </li>
        </ul>
    </menu>
</div>
<div id="myModal" class="modal fade">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                <input type="text" />
                <p>Body</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="save" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
   <!-- /.modal -->
</body>
</html>

script

<script type="text/javascript">
    $(function() {
        $("#myModal").draggable({
            handle: ".modal-header"
        });
        $("#save").click(function () {

        }
        );
 });
</script>

Output

Jquery Validate

                        How to use Jquery Validate

• we need Jquery and Jquery.validate js files
• we need specify class as "required" for input control which needs to have value 
• In the document.ready we need to call validate

Html 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery validate</title>
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
</head>
<body>
<form id="form" class="form" name="ContactForm" method="POST">
 <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-3">
                <label for="FirstName">
                    First Name
                </label>
                <input type="text" class="form-control required" id="FirstName">
            </div>
            <div class="col-md-3 ">
                <label for="LastName">
                    Last Name
                </label>
                <input type="text" class="form-control"   id="LastName">
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-3 ">
                <label for="Email">
                    Email
                </label>
                <input type="text" class="form-control  required email" id="Email">
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-3 ">
                <button type="submit" class="btn btn-primary ">
                    Submit
                </button>
            </div>
        </div>
    </div>
 </div>
</form>
</body>
</html>
Java Script

<script type="text/javascript">
    $(document).ready(function () {
        $('.form').validate({
        });

    });
</script>

Java Script

Ouptput

Font awesome image in a button

                 Font awesome image in a button

we can have font awesome icon in button as shown below

Reference

Note : we need to specify hexadecimal value

output

Button Loading animation

                       Button loading animation

we can use javacript to animate laoding text change for a button

Html

output

Kendo Grid Check All

                  Kendo grid check all functionality

if we need a check box to check and uncheck all rows . This is the code snippet

Output

Kendo bind local data

                                  Kendo bind local data

Binding data using local data or through http get

Validate Http:Post

Validate $HTTP Post using Fiddler

Today I would be talking about validating a Restfull http Post using fiddler.we can validate if the post was successful. 

Steps invloved

• Open fiddler and specify the Post Url in the composer
• Specify the action method as Post
• Create a request body (Data which would be sent)
• Validate the response message as shown in the snapshot

Output

Angular http

                     Using angular for http 

  Using angular it is simple to get JSON data and display it in a view.

Edit in plunker

HTML

Angular two way data binding

                       Two way binding in Angular

Today i would show you a simple example of two way binding in Angular.

Note:  

• Like Knockout we do not need any observable. 
• Less amount of code
• When view changes model changes. When model changes view changes. This is known as two way binding

Edit in Plunker