We can set the default value for ng-options as shown below
Html
Thursday, September 17, 2015
Angular UI-Select Clear
When we are using UI-Select we need to reset the selected Item.
We can achieve this by using
Html
Wednesday, September 16, 2015
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
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
Monday, September 14, 2015
Entity FrameWork Add Edmx
Entity FrameWork Add Edmx
Quick reference for adding edmx file.
Step 1
Step 2
Step 3
Saturday, September 12, 2015
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">×</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
Subscribe to:
Posts (Atom)