tag:blogger.com,1999:blog-36836012099473972962024-03-28T03:58:09.651-07:00AngularJS TutorialsLearning angularjs via detail examples. AngularJs event, angularjs table, angularjs grid, angularjs sort, angularjs sort filter, angularjs application, angularjs templates, angularjs bootstrap.Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.comBlogger59125tag:blogger.com,1999:blog-3683601209947397296.post-36287653231278047022015-12-03T23:58:00.001-08:002016-06-08T00:38:50.469-07:00Angular dialog exampleIn this post I'll explain how to create Angular dialog based on Angular Material.
We'll work on 4 type of dialog.<br>
<ul>
<li>Alert Dialog.</li>
<li>Confirm Dialog.</li>
<li>Tab Dialog.</li>
<li>Custom Dialog.</li>
</ul>
<a href="https://angularjsaz.blogspot.com/2015/12/angular-dialog-example.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com35tag:blogger.com,1999:blog-3683601209947397296.post-70535280279973774152015-11-26T01:26:00.002-08:002015-11-30T17:40:50.805-08:00Angularjs bootstrap tabs exampleBased on Angular <a href="https://material.angularjs.org/" target="_blank">material</a> I make a example for Angular Tabs with responsive<br>
<br>
Angular material define<span style="color: blue;"> <b><code class="highlight"><span class="hljs-tag"><<span class="hljs-title">md-tabs><</span></span></code></b></span><code class="highlight"><span class="hljs-tag"><span class="hljs-title"><span style="color: blue;"><b>md-tabs></b></span> for tabs container, </span></span></code><br>
<pre><span style="color: #38761d;"><b><code class="highlight"><span class="hljs-tag"><<span class="hljs-title">md-tab>...<</span></span></code></b></span><code class="highlight"><span class="hljs-tag"><span class="hljs-title"><span style="color: #38761d;"><b><code class="highlight"><span class="hljs-tag">/<span class="hljs-title">md-tab></span></span></code></b></span> for Tab.</span></span></code></pre>
<pre><code class="highlight"><span class="hljs-tag"><span class="hljs-title">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://ui-tutorials.blogspot.com/2015/11/angularjs-bootstrap-tabs-example.html" imageanchor="1" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Angular Tabs" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggfOZFVOiDL1D4ZD4T93_H2JoDzRqYrK7d8WrBOVvS1bWV09K4oyDAHXbQhduitC7UJKUSgA-1hhRH7Nw7-wguMJMjMHGdlA82s2g6kgtzClWUAxoJJwHzZgLGZbT1Y0-ZPBNKcMK16c/s1600/angularTabs.jpg" title="Angular Tab"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://ui-tutorials.blogspot.com/2015/11/angularjs-bootstrap-tabs-example.html" target="_blank">Angular Tabs image</a></td></tr>
</tbody></table>
</span></span><span class="hljs-tag"><span class="hljs-title"> </span></span></code></pre>
<pre><code class="highlight"><span class="hljs-tag"><span class="hljs-title">Full html struct example as following:</span></span></code></pre>
<a href="https://angularjsaz.blogspot.com/2015/11/angularjs-bootstrap-tabs-example.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com27tag:blogger.com,1999:blog-3683601209947397296.post-50251308978002665402015-11-10T22:59:00.001-08:002016-04-24T20:09:00.358-07:00Top Premium angular templates<br>
<span style="font-size: x-large;"><b>Top rate premium angular templates</b></span><br>
<br>
<div style="text-align: right;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: x-small;"><span style="color: #20124d;"><span style="font-size: medium;"><i><u>You may need others</u></i></span></span></span> </div>
<div style="text-align: right;">
<span style="font-size: x-small;"><a href="http://themeforest.net/tags/angularjs?ref=lewisiits" target="_blank">1. Top 30 angularjs templates</a></span></div>
<div style="text-align: right;">
<span style="font-size: x-small;"><a href="http://themeforest.net/search?utf8=%E2%9C%93&term=angular+bootstrap+template&ref=lewisiits" style="background-color: white; color: #660099; cursor: pointer; font-family: "arial",sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-decoration: underline; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;" target="_blank">2. Angular<span class="Apple-converted-space"> </span><b>bootstrap</b><span class="Apple-converted-space"> </span>template</a></span></div>
<div class="product-list__heading" style="background-color: whitesmoke; box-sizing: border-box; clear: left; color: black; font-family: "helvetica neue","helvetica","arial",sans-serif; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 1.3; margin: 0px; padding-top: 0px; position: relative; text-align: right; text-indent: 0px; text-transform: none; top: -4px; white-space: normal; word-spacing: 0px;">
<span style="font-size: x-small;"><a class="js-google-analytics__list-event-trigger t-link -color-inherit -decoration-reversed" href="http://themeforest.net/search?utf8=%E2%9C%93&term=Bootstrap+Admin+Theme+with+AngularJS&view=list&sort=&date=&price_min=&price_max=&sales=&rating_min=&ref=lewisiits" style="background: transparent none repeat scroll 0% 0%; box-sizing: border-box; color: currentcolor; outline: 0px none; text-decoration: underline;" target="_blank">3. Bootstrap Admin Theme with AngularJS</a></span></div>
<div style="text-align: right;">
<span style="font-size: x-small;"><a href="http://themeforest.net/search?utf8=%E2%9C%93&term=angular+material&as=1&type=p&referrer=search&view=list&sort=&date=&price_min=&price_max=&sales=&rating_min=&ref=lewisiits" target="_blank">4. Angular material templates</a></span></div>
<span style="font-size: x-large;"> <b> </b></span><br>
<br>
<span style="color: red;"><span style="font-size: x-large;">1. Maverick</span></span><br>
<h3>
<span style="color: #990000;"><span style="font-size: large;"><a href="http://themeforest.net/item/maverick-responsive-admin-with-angularjs/11336355?s_phrase=&s_rank=25&ref=lewisiits" target="_blank">Responsive Admin with AngularJS template - Maverick</a> </span></span></h3>
<br>
<div class="separator" style="clear: both; text-align: center;">
<b><img alt="Responsive admin template with angularjs" border="0" height="481" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHOnnj4Ly0IdKr4W7lCx0yCGK8_-nFmLHkWnCdGKajyhKm5l3GtEwhjH4oE0DlbbFXNznQMdDEsTxLdadrr-JcccvRpihPRLqOJBufgIlU54VWKrGFhcvkrDuaqonIhXSbc3xt9vEeW7c/s640/Maverick+-+Responsive+Admin+with+AngularJS.jpg" width="640"></b></div>
<br>
<b></b><br>
<br>
<b>Features</b><br>
<ul>
<li>Responsive Design</li>
<li>Fast Single Page Application built with <b>AngularJS</b></li>
<li>Bower packages for front-end dependency management</li>
<li>Grunt for hassle-free deployment</li>
<li>Layered PSD file</li>
<li>Advanced panel controls built with AngularJS</li>
<li>Programmable menu system with search functionality</li>
<li>Customizable animations and page transitions</li>
<li>Detailed documentation with code snippets</li>
</ul>
<span style="font-size: x-large;"><span style="background-color: #fff2cc;"><a href="http://themeforest.net/item/maverick-responsive-admin-with-angularjs/11336355?s_phrase=&s_rank=25&ref=lewisiits">>> Read more</a></span></span><br>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://themeforest.net/item/maverick-responsive-admin-with-angularjs/11336355?s_phrase=&s_rank=25&ref=lewisiits" target="_blank"><br></a></div>
<h3>
<span style="color: red;"><span style="font-size: x-large;">2. Triangular</span></span></h3>
<h3>
<span style="color: #990000;"><span style="font-size: large;"><a href="http://themeforest.net/item/triangular-material-design-admin-template-angularjs/11711437?s_phrase=&s_rank=20&ref=lewisiits" target="_blank">Material Design Admin Template AngularJS </a> </span></span></h3>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://themeforest.net/item/triangular-material-design-admin-template-angularjs/11711437?s_phrase=&s_rank=20&ref=lewisiits" target="_blank"><b><img alt=" Angularjs template" border="0" src="http://oxy-wp-media.s3.amazonaws.com/triangular/triangular.jpg" height="435" width="640"></b></a></div>
<br>
<div class="separator" style="clear: both; text-align: center;">
<b><br></b></div>
<b>Features</b><br>
<ul>
<li>Complient with the <a href="http://www.google.com/design/spec/material-design/introduction.html">Material Design Specification</a></li>
<li>Powered by AngularJS 1.4</li>
<li>50+ Example Pages</li>
<li>Unlimited Menu Levels</li>
<li>5 Star Support</li>
<li>700+ Material Design Icons</li>
<li>500+ Font Awesome Icons</li>
<li>Uses SASS Stylesheets</li>
<li>Automatic Breadcrumb Headings (based on menu heirachy)</li>
<li>ESlint & ESlint AngularJS plugin checks built in</li>
<li>AngularJS Speed profiler</li>
<li>Uses ARIA attributes that convey information about the application for users of assistive technologies.</li>
<li>Free update </li>
</ul>
<a href="https://github.com/johnpapa/angular-styleguide"></a><br>
<span style="font-size: x-large;"><span style="background-color: #fce5cd;"><a href="http://themeforest.net/item/triangular-material-design-admin-template-angularjs/11711437?s_phrase=&s_rank=20&ref=lewisiits" target="_blank"><span style="font-size: large;">>>Read more</span></a></span></span><br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/11/top-premium-angular-templates.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com1tag:blogger.com,1999:blog-3683601209947397296.post-6729108010659399942015-11-08T19:20:00.001-08:002015-11-11T00:00:38.877-08:00Angularjs listbox with checkbox <h3>
Angularjs listbox with checkbox example</h3>
Base on <b>AngularJs Material</b> I create a example for Angularjs listbox with checkbox as following image<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXOK65cTtJEoiAgl4Uw97a-NKrzws9jn5I7WfU1YTNWBhYZv6MEPmElHAYfhis35Bm1jaDdzfdzt0VfQv4i_T8vza2cfaDBN1tYqx5lZ89xy671N7tGuJHp8McxTfHTQiZsHCuld5XHXA/s1600/Angularjs+listbox+with+checkbox.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXOK65cTtJEoiAgl4Uw97a-NKrzws9jn5I7WfU1YTNWBhYZv6MEPmElHAYfhis35Bm1jaDdzfdzt0VfQv4i_T8vza2cfaDBN1tYqx5lZ89xy671N7tGuJHp8McxTfHTQiZsHCuld5XHXA/s640/Angularjs+listbox+with+checkbox.jpg" width="640"></a></div>
<br>
How to do it?<br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/11/angularjs-listbox-with-checkbox.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com4tag:blogger.com,1999:blog-3683601209947397296.post-27393738271975912872015-11-06T01:28:00.004-08:002017-07-09T16:16:15.679-07:00Angularjs select option with image<h3>
<b>Angularjs select option with image</b></h3>
<h3>
<b> <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1U2m4WMZ5u6RLK69blLtXx_LzhSZAIS_dvbFGN2-vVeNBVaSu1zbjQnNsd2rRdLAvD45bNcNdS2IYC4KKLWbCzP_UUVCxa5hUHnTSrEyWlxqn2i41WwzXMHvOmMReKQ4b1ENwm0CKSFc/s1600/listbox-image-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1U2m4WMZ5u6RLK69blLtXx_LzhSZAIS_dvbFGN2-vVeNBVaSu1zbjQnNsd2rRdLAvD45bNcNdS2IYC4KKLWbCzP_UUVCxa5hUHnTSrEyWlxqn2i41WwzXMHvOmMReKQ4b1ENwm0CKSFc/s320/listbox-image-1.jpg" width="320"></a></div>
</b><b><br>
</b><b><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCvWnFBaXC3m82D3RWbEmasIaP0AdfYZtS5_bToCcIxkVmbhcZxi4wrSUENlV7_s0S4nR8yq8c3iABi2Jn8oPJCYTJr0j65qN_3lV6Gv5TmnE8TsobAS5LIozyGEOTxgQaeDDbZ0ppNh0/s1600/listbox-image-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCvWnFBaXC3m82D3RWbEmasIaP0AdfYZtS5_bToCcIxkVmbhcZxi4wrSUENlV7_s0S4nR8yq8c3iABi2Jn8oPJCYTJr0j65qN_3lV6Gv5TmnE8TsobAS5LIozyGEOTxgQaeDDbZ0ppNh0/s320/listbox-image-2.jpg" width="320"></a></div>
</b></h3>
How to create these select?<br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/11/angularjs-select-option-with-image.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com13tag:blogger.com,1999:blog-3683601209947397296.post-23121940202523292412015-11-03T01:42:00.003-08:002015-11-03T18:23:11.422-08:00AngularJs button material example.<h3>
<span style="font-size: x-large;">AngularJs button material example.</span></h3>
Based on <a href="https://material.angularjs.org/latest/api/directive/mdButton" target="_blank">mdButton API Documentation </a><span style="color: blue;"><code><md-button></code></span> is a button directive with optional ink ripples (default enabled).<br>
<br>
In this post I will make a example for:<br>
<ul>
<li>Flat button</li>
<li>Raised button</li>
<li>FAB button </li>
<li>Button with link</li>
<li>Button Themed</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ui-tutorials.blogspot.com/2015/11/md-button.html" target="_blank"><img alt="AngularJs Button example" border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo_F7leeA_YGo2V10V7qDslmFPwvN-pU1zW0iQnvW9qTfoOvTVaJKBUR7eClL8njVhPB4bt9aux2oiZX3XXvVKd33-eqNXnocTS7SfqM4D3Ey42NORXHhxDe8lJjTW5pI10BA183tfXos/s640/materialbutton.jpg" width="640"></a></div>
<br>
<a href="https://angularjsaz.blogspot.com/2015/11/angularjs-button-material-example.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com1tag:blogger.com,1999:blog-3683601209947397296.post-58609230979344863912015-11-02T00:12:00.005-08:002015-11-19T01:56:42.593-08:00Top free angularjs template<h3>
Free angular templates</h3>
<span style="font-size: large;"><b>1. Dashboard angularjs bootstrap template.</b></span><br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqRe85DvgdmJxzgcABET98n5Y0MoBP56Z-Guodhswh_IPk_OU8onLAoA3tlEDptHC9ZIVNifFZft4X5lLuQrigp3inYVsWtNhBQ1sqX5muopEaMyEabkMUw5e8QklW6-PLK6V5bwzLyjA/s640/Dashboard+angularjs+bootstrap+template.jpg" width="640"></div>
<br>
<div style="text-align: center;">
<br></div>
<br>
<a href="https://angularjsaz.blogspot.com/2015/11/top-free-angularjs-template.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com2tag:blogger.com,1999:blog-3683601209947397296.post-59638953688559283752015-10-29T21:05:00.002-07:002017-07-09T16:27:27.152-07:00Angularjs routing asp.net mvc example<span style="font-family: "verdana" , sans-serif;">In this article I try to make a simple example about how to apply angularjs routing for asp.net mvc application. After this you can know how to use <b>angularjs routing </b>and <b>angularjs routing for MVC</b>. Beside that you can know how to rout with parameter, how to use <b>ng-view</b>.</span><br>
<span style="font-family: "verdana" , sans-serif;">agenda:</span><br>
<ul>
<li><span style="font-family: "verdana" , sans-serif;">Add MVC application</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Reference angularjs to MVC application</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Add angularjs router and angularjs controller</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Modify _Layout.cshtml and some mvc view to use angularjs.</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Run and see result</span></li>
</ul>
<br>
<a href="https://angularjsaz.blogspot.com/2015/10/angularjs-routing-aspnet-mvc-example.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com34tag:blogger.com,1999:blog-3683601209947397296.post-56649336826453444702015-10-28T01:13:00.001-07:002015-10-28T01:21:05.884-07:00Angular best practice documentsTo apply angularjs for application success I think that we need refer following best practice documents:<br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/10/angular-best-practice-documents.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com0tag:blogger.com,1999:blog-3683601209947397296.post-44113160980010016772015-10-27T01:41:00.000-07:002015-10-27T01:41:29.080-07:00How to use ng-paste and ng-cut?<h3>
- ng-cut is specify custom behavior on cut event.</h3>
How to apply ng-cut?<br>
<br>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKaHQsxwDzTfZmVIj_vcekjocnUWoxS8ffg_PqDSUYc95LW8zuJby9qdDWzKDqqUYAxnmnP6WLQTWHaMHa38zIIIZUVzSCKexihCPTxE-QyWQOJtAysvc4tfbxel5Kwh9ct7iUpvNlQSY/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> <input <span style="color: blue;"><b>ng-cut</b></span>="cut=true" ng-init="cut=false; value='please cut me'" ng-model="value">
You just cut it: {{cut}}
</code></pre>
<h3>
- ng-paste is specify custom behavior on paste event.</h3>
How to apply ng-paste?<br>
<br>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKaHQsxwDzTfZmVIj_vcekjocnUWoxS8ffg_PqDSUYc95LW8zuJby9qdDWzKDqqUYAxnmnP6WLQTWHaMHa38zIIIZUVzSCKexihCPTxE-QyWQOJtAysvc4tfbxel5Kwh9ct7iUpvNlQSY/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> <input <span style="color: blue;"><b>ng-paste</b></span>="paste=true" ng-init="paste=false" placeholder='please paste here'>
pasted: {{paste}}
</code></pre>
<br>
Full code for this example as below:<br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/10/how-to-use-ng-paste-and-ng-cut.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com0tag:blogger.com,1999:blog-3683601209947397296.post-75880366436169049712015-10-26T00:52:00.001-07:002015-10-26T00:54:42.725-07:00ng-copy example ng-copy is specify custom behavior on copy event.<br>
Read more at <a href="https://docs.angularjs.org/api/ng/directive/ngCopy" target="_blank">AngularJs doc</a><br>
<br>
Please run below code to learn.<br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/10/ng-copy-example.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com0tag:blogger.com,1999:blog-3683601209947397296.post-76140218307916845322015-10-22T21:01:00.000-07:002015-10-22T21:52:23.284-07:00AngularJs input with types exampleThis example show how to use angularjs input with type is text, checkbox, radio, date, datetime-local,time, email, month, number, url and week .<br>
<br>
Input belong ng module of angularjs.<br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/10/angularjs-input-with-type-example.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com3tag:blogger.com,1999:blog-3683601209947397296.post-91000682527680237602015-10-22T01:01:00.002-07:002015-10-22T18:48:07.270-07:00angularjs a directive example The <b><span style="font-size: large;">a </span>directive </b>of angularjs is modifed form the html A tag so that the default action is prevented when the href attribute is empty.<br>
You can refer direct <a href="https://docs.angularjs.org/api/ng/directive/a" target="_blank">AngularJs doc</a> for this to know more. In this post i just want to make a example to help you learn easy.<br>
<br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/10/angularjs-directive-example.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com0tag:blogger.com,1999:blog-3683601209947397296.post-47664042758631430252015-10-20T20:33:00.000-07:002015-10-22T02:35:08.372-07:00Angularjs format input number when typing exampleIn this example i will show how to make <b>format </b>input <b>number </b>when typing in <b>angularjs</b>, we will use ng-changed event to do that. Of course you also use other way to do that.<br>
Our goal:<br>
Input : 100 => change to 100<br>
Input : 1000 => change to 1,000<br>
Input : 10000 => change to 10,000<br>
Input : 100000 => change to 100,000<br>
.....<br>
And<br>
Input : 100000.450 => change to 100,000.450<br>
<br>
I hope that after got this example you can customize and make a common function related it.<br>
<br>
Full code here<br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/10/angularjs-format-input-number-when.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com0tag:blogger.com,1999:blog-3683601209947397296.post-14622065180098699662015-10-19T02:41:00.000-07:002015-10-19T22:29:30.032-07:00How to get total days of a month of a year.<h3>
How to get total days of a month of a year via angularjs.</h3>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKaHQsxwDzTfZmVIj_vcekjocnUWoxS8ffg_PqDSUYc95LW8zuJby9qdDWzKDqqUYAxnmnP6WLQTWHaMHa38zIIIZUVzSCKexihCPTxE-QyWQOJtAysvc4tfbxel5Kwh9ct7iUpvNlQSY/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> $scope.month = 10;
$scope.year = 2015;
// Get total days of Oct 2015
$scope.totalDays = new Date($scope.year, $scope.month, 0).getDate();
</code></pre>
<br />
totalDays = 31;Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com0tag:blogger.com,1999:blog-3683601209947397296.post-54399297050842713282015-10-15T01:52:00.002-07:002015-10-15T03:34:26.902-07:00Angularjs table format example<h3>
Angularjs table format example</h3>
Requirement:<br>
Have a list customers, show customer information (name, age, gender, phone) as a table.<br>
To make discern base on gender: if gender = 'girl' then textcolor will be green<br>
To make discern base on age: if age <20 background of age cell will be blue (is teen)<br>
<br>
if age >60 background of age cell will be gray(is old)<br>
<br>
As same as following image<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8mpBgtE9xYb_GXirlSE9MvzLXn3CWsSTfeQIHo9lO9nvlDCbRbBSFsGvmw6sJIUSLjQJkIL0UelVGPvQirQEX9yS7AJHRr6sKU_PpaQVBFULPEwTZigrCDYz2i4oENAHT6b7w1s-AdBI/s1600/formated+table.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8mpBgtE9xYb_GXirlSE9MvzLXn3CWsSTfeQIHo9lO9nvlDCbRbBSFsGvmw6sJIUSLjQJkIL0UelVGPvQirQEX9yS7AJHRr6sKU_PpaQVBFULPEwTZigrCDYz2i4oENAHT6b7w1s-AdBI/s1600/formated+table.jpg"></a></div>
Here is full code, please focus at highlight chars.<br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/10/angularjs-table-format-example.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com0tag:blogger.com,1999:blog-3683601209947397296.post-61394335588403969592015-10-12T20:23:00.003-07:002015-12-13T18:37:29.584-08:00Multi select listbox with dynamid ng-selected values<h3>
Multi select listbox with dynamid ng-selected values</h3>
Example: we have two arrays: <b><i>categories </i></b>array is a list of categories and <span style="color: blue;"><b><i>selectedcategories </i></b></span>is a list selected categories by id. We want to use <select > to display all categories via multi selected categories which matching selectedcategories array values.<br>
<br>
Output sample:<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJxo8J3wDnbnSv4ckKVuLIHoocNMaimhfvrDZXNdVVpk4QTf7HqBbcItogS4xJ7mnQkZjQ8H85pgnjUDglFa_7SrBaed4DyGxJf9og0yA2kAAHysWuefuIbB6vTpcQ3ZgYOD-zz-YaLE/s1600/multiselect.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJxo8J3wDnbnSv4ckKVuLIHoocNMaimhfvrDZXNdVVpk4QTf7HqBbcItogS4xJ7mnQkZjQ8H85pgnjUDglFa_7SrBaed4DyGxJf9og0yA2kAAHysWuefuIbB6vTpcQ3ZgYOD-zz-YaLE/s1600/multiselect.jpg"></a></div>
<br>
<br>
Here is full code <br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/10/multi-select-listbox-with-dynamid-ng.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com0tag:blogger.com,1999:blog-3683601209947397296.post-32427823432037004402015-10-08T20:04:00.000-07:002015-10-16T03:18:38.625-07:00Filter by and operator in AngularJsIn this post I will show you how to use && operator in AngularJs.<br>
Example I have a students list as below:<br>
<br>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKaHQsxwDzTfZmVIj_vcekjocnUWoxS8ffg_PqDSUYc95LW8zuJby9qdDWzKDqqUYAxnmnP6WLQTWHaMHa38zIIIZUVzSCKexihCPTxE-QyWQOJtAysvc4tfbxel5Kwh9ct7iUpvNlQSY/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> $scope.students = [
{ name: 'Hai', age: 25, gender: '<span style="color: blue;">boy</span>' },
{ name: 'Hai', age: 30, gender: 'girl' },
{ name: 'Ho', age: 25, gender: '<span style="color: blue;">boy</span>' },
{ name: 'Hoan', age: 40, gender: 'girl' },
{ name: 'Hieu', age: 25, gender: '<span style="color: blue;">boy</span>' }
];
</code></pre>
<br>
I want to filter students via gender to be boy and filter by name of them.<br>
<br>
The first I create a function named "filterbyboy" as following:<br>
<br>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKaHQsxwDzTfZmVIj_vcekjocnUWoxS8ffg_PqDSUYc95LW8zuJby9qdDWzKDqqUYAxnmnP6WLQTWHaMHa38zIIIZUVzSCKexihCPTxE-QyWQOJtAysvc4tfbxel5Kwh9ct7iUpvNlQSY/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> $scope.filterbyboy = function (genderstr) {
if ((typeof $scope.search === 'undefined')||($scope.search === ''))
return (genderstr = "")
else
return (genderstr = "<span style="color: blue;">boy</span>");
};
</code></pre>
<br>
Explaination: if not filter name then display all students else filter by input name and gender as 'boy'<br>
<br>
Here is full HTMLcode<br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/10/filter-by-and-operator-in-angularjs.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com2tag:blogger.com,1999:blog-3683601209947397296.post-74127262695959057622015-09-24T02:44:00.003-07:002017-03-06T10:03:40.056-08:00Angularjs table sorting filter and paging <h3>
Angularjs table sorting, filter and paging </h3>
This post provides an example about how create a table via sorting, filter and paging. Following directives and services in angularjs will be used:<br>
<ul>
<li>orderby</li>
<li>filter</li>
<li>ng-click</li>
<li>ng-model</li>
<li>ng-repeat</li>
</ul>
<a href="https://angularjsaz.blogspot.com/2015/09/angularjs-table-sorting-filter-and.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com28tag:blogger.com,1999:blog-3683601209947397296.post-7139851457806867582015-09-24T00:19:00.002-07:002015-09-24T21:14:50.107-07:00Angularjs table via sorting and filter on columns example<h3>
Angularjs table example</h3>
This post provides an example about how create a table via sort and filter features.<br>
Following directives and services in angularjs will be used:<br>
<ul>
<li>orderby</li>
<li>filter</li>
<li>ng-click</li>
<li>ng-model</li>
<li>ng-repeat</li>
<li>ng-init </li>
</ul>
<br>
<a href="https://angularjsaz.blogspot.com/2015/09/angularjs-table-via-sorting-and-filter.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com2tag:blogger.com,1999:blog-3683601209947397296.post-43761188798487254142015-09-23T21:48:00.000-07:002015-11-11T00:10:55.828-08:00Angularjs event example<br>
<b>This example helps you known about six events in angularjs</b><br>
<br>
• Mousedown event<br>
• Mouseenter event<br>
• Mouseleave event<br>
• Mousemove event<br>
• Mouseover event<br>
• Mouseup event<br>
<a href="https://angularjsaz.blogspot.com/2015/09/angularjs-event-example.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com2tag:blogger.com,1999:blog-3683601209947397296.post-25082083609057401672015-09-23T01:23:00.000-07:002015-09-24T21:18:34.143-07:00Angularjs ng-pattern example<h3>
<b>Angularjs input pattern example</b></h3>
This example is using <b>ng-pattern</b> for Number, Text only and Date type. <br>
Please follow this code to know how to apply<b> ng-pattern</b>. If you try to input incorrect data the form will be invalid and text on it changes to <span style="color: red;">RED</span>. <br>
<br>
<br>
<a href="https://angularjsaz.blogspot.com/2015/09/angularjs-ng-pattern-example.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com3tag:blogger.com,1999:blog-3683601209947397296.post-77752412757209766522015-09-21T20:55:00.001-07:002017-07-09T16:25:47.956-07:00ng-class if example <br>
How to apply <b>ng-class if</b><br>
<br>
This example provides two ways using <b>ng-class if</b> expression.<br>
Following directives and services in angularjs will be used:<br>
<ul>
<li>ng-classs</li>
<li>ng-model</li>
<li>ng-repeat</li>
</ul>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-5994399777816859"
data-ad-slot="7756166521"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<a href="https://angularjsaz.blogspot.com/2015/09/ng-class-if-example.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com73tag:blogger.com,1999:blog-3683601209947397296.post-40163766795223383622015-09-21T06:01:00.001-07:002015-09-21T06:11:19.465-07:00Tutorial 33 - angularjs works with wcf<h3 style="margin-bottom: 7.5pt; margin-left: 0in; margin-right: 0in; margin-top: 7.5pt;">
<span style="background: white; font-family: Consolas; font-size: 14.5pt;">Angularjs works
with wcf</span><span style="font-family: Consolas; font-size: 14.5pt;"><o:p></o:p></span></h3>
<div>
<span style="background: white; font-family: Consolas; font-size: 14.5pt;">on-going</span></div>
Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com2tag:blogger.com,1999:blog-3683601209947397296.post-32604081356896090712015-09-21T05:58:00.001-07:002017-07-09T16:12:48.158-07:00Tutorial 32 - Angularjs MVC RESTful Web Service example<span style="font-family: "trebuchet ms" , sans-serif;"></span>
<br>
<h3>
<span style="font-family: "trebuchet ms" , sans-serif;"> Angularjs MVC RESTful Web Service example</span></h3>
<span style="font-family: "trebuchet ms" , sans-serif;"><br>This example shows how to create a simply web application using <b>angularjs</b>, <b>mvc</b>, RESTful </span><span style="font-family: "trebuchet ms" , sans-serif;"><span style="font-family: "trebuchet ms" , sans-serif;">Web Service </span>and ORM </span><span style="font-family: "trebuchet ms" , sans-serif;"><span style="font-family: "trebuchet ms" , sans-serif;"><b>Entity Framework</b></span>, I named it is “manage customer”.<br><br><br>List of features:</span><br>
<ul>
<li><span style="font-family: "trebuchet ms" , sans-serif;"> List customer</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"> Edit customer</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"> Create new customer</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"> Delete customer</span></li>
</ul>
<span style="font-family: "trebuchet ms" , sans-serif;"><br><br>List of projects of “manage customer” application:</span><br>
<ol>
<li><span style="font-family: "trebuchet ms" , sans-serif;"> CustomerEntities (<b>Entity Framework </b>6.0.0.0)</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"> CustomerDAL (c# class library)</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"> CustomerBLL (c# </span><span style="font-family: "trebuchet ms" , sans-serif;"><span style="font-family: "trebuchet ms" , sans-serif;">class </span></span><span style="font-family: "trebuchet ms" , sans-serif;"><span style="font-family: "trebuchet ms" , sans-serif;"><span style="font-family: "trebuchet ms" , sans-serif;">library</span></span>)</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"> CustomerAPI (RESTful web service)</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"> CustomerUI (<b>AngularJs</b>, <b>MVC</b>)</span></li>
</ol>
<span style="font-family: "trebuchet ms" , sans-serif;"><br><br>Notes that in customer UI will be no C# controller file, it is be replaced by angularjs script file. CustomerAPI will works with CustomerBLL to controll business logic, CustomerBLL reference data layer (CustomerDAL) and CustomerDAL works CustomerEntities to query data.<br>OK now we focus step by step to know it.</span><span style="font-family: "trebuchet ms" , sans-serif;"><br></span>
<span style="font-family: "trebuchet ms" , sans-serif;"><br><b>Step 1: Create database for “manage customer” application</b></span><br>
<a href="https://angularjsaz.blogspot.com/2015/09/tutorial-32-angularjs-works-with-web-api.html#more">Read more »</a>Anonymoushttp://www.blogger.com/profile/13768191580588554678noreply@blogger.com84