Menu ▼


<< < 1 2 3 > >>

This example shows you how to highlight or change background color of table when the table row data matched with the entered text in a textbox. You need to set the ng-class directive to the table row and write the expression to return true when the row/cell text match the entered text in textbox.

Example

Employee

Employee
{{employee.Name}}

Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <style type="text/css">
        .tblemp
        {
            border-collapse: collapse;
        }
        .tblemp th, .tblemp td
        {
            border: solid 1px #ccc;
            padding: 5px 10px;
        }
        .match
        {
            background: #24D0F9;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="SampleApp" ng-controller="SampleCntrl">
        Employee
        <input type="text" ng-model="empfind" />
        <br />
        <br />
        <table class="tblemp">
            <thead>
                <tr>
                    <th>
                        Employee
                    </th>
                </tr>
            </thead>
            <tr ng-repeat="employee in employeeList" ng-class="{match:empfind.length>0 &&employee.Name.toLowerCase().indexOf(empfind.toLowerCase())>=0}">
                <td>
                    {{employee.Name}}
                </td>
            </tr>
        </table>
    </div>
    <script>
        var myapp = angular.module("SampleApp", []);
        myapp.controller("SampleCntrl", function ($scope) {
            $scope.employeeList = [{
                "Name": "Smith"
            },
        {
            "Name": "Jhon"
        },
            {
                "Name": "Williams"
            }]
        });
    </script>
</body>
</html>

Read More...
Submited By : mrkraju On 15 Dec 2015

AngularJS ng-disabled directory is used to disable the controls. It will disable the element based on the return value of given {expression}. Below example will disable button, fieldset and all controls in fieldset when the check box selected by adding disabled attribute and re-enable elements when the checkbox unselected.

Example
Below example will disable the button control whent the checkbox selected.





Below example will disable the fildset and all controls in the fildset(login controls)


User Name:


Password:


Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        <input type="checkbox" ng-model="disablebtn" id="chbbutton" name="chbbutton" />
        <label for="chbbutton">
            Select this checkbox to disable the below button</label>
        <br />
        <br />
        <input type="button" value="Disable Example" ng-disabled="disablebtn" />
        <br />
        <br />
        <input type="checkbox" ng-model="disablefldset" id="chbfldset" name="chbfldset" />
        <label for="chbfldset">
            Select this checkbox to disable the fieldset and all controls</label>
        <br />
        <br />
        <fieldset ng-disabled="disablefldset">
            User Name:
            <br />
            <input type="text" />
            <br />
            <br />
            Password:
            <br />
            <input type="text" />
            <br />
            <br />
            <input type="button" value="Login" />
        </fieldset>
    </div>
    <script language="javascript">
        var myapp = angular.module("myApp", []);
        myapp.controller("myCntrl", function ($scope) {
            $scope.disablebtn = false;
            $scope.disablefldset = false;
        });
    </script>
</body>
</html>

Read More...
Submited By : mrkraju On 05 Dec 2015

AngularJS ng-class-even and ng-class-odd can be used with ng-repeat directive and ng-class-even will be applied to even rows and ng-class-odd will be applied to odd rows in the ng-repeat rows. In the below example bgeven class will be applied to even rows and bgodd class will be applied to odd rows of the table.

Syntax

<tr ng-repeat="department in departments" ng-class-even="{bgeven:true}" ng-class-odd="{bgodd:true}">
    <td>
        {{department.Name}}
    </td>
</tr>

Example

Department Name
{{department.Name}}

Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .tblcls
        {
            border-collapse: collapse;
        }
        .tblcls td
        {
            border: solid 1px #ccc;
            padding: 5px 10px;
        }
        .tblcls th
        {
            border: solid 1px #ccc;
            padding: 5px 10px;
            background: #B14646;
        }
        .bgeven
        {
            background: #C7C5C7;
        }
        .bgodd
        {
            background: #4685B1;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        <table class="tblcls">
            <thead>
                <tr>
                    <th>
                        Department Name
                    </th>
                </tr>
            </thead>
            <tr ng-repeat="department in departments" ng-class-even="{bgeven:true}" ng-class-odd="{bgodd:true}">
                <td>
                    {{department.Name}}
                </td>
            </tr>
        </table>
    </div>
    <script language="javascript">
        var myapp = angular.module("myApp", []);
        myapp.controller("myCntrl", function ($scope) {
            $scope.departments = [{ "Name": "Accounts" }, { "Name": "Development" }, { "Name": "Finance" }, { "Name": "HR" }, { "Name": "Testing"}];
        });
    </script>
</body>
</html>

Read More...
Submited By : mrkraju On 05 Dec 2015

ng-copy
The ng-include directive is used to load other url (page) content in the current page.

Example

URL
http://dotnetlearners.com/



You can change the above text value to any of the following page to test the functionality.
activemembers.aspx
rss.xml

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .smplprv
        {
            padding: 10px;
            border: solid 1px #ccc;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        URL<br />
        http://dotnetlearners.com/<input type="text" ng-model="sampleurl" />
        <br />
        <br />
        <div ng-include="includeurl()" ng-class="{smplprv:true}">
        </div>
    </div>
    <script language="javascript">
        var myapp = angular.module("myApp", []);
        myapp.controller("myCntrl", function ($scope) {
            $scope.sampleurl = "stats.aspx";
            $scope.includeurl= function(){
                return "/"+$scope.sampleurl;
            }
        });
    </script>
</body>
</html>

Read More...
Submited By : mrkraju On 29 Nov 2015

ng-copy
The ng-copy directive will be used to define custom behaviour/functionality on copy event.

Syntax

<input type="text" ng-model="copyval" ng-copy="copyevt();" />

$scope.copyevt = function () {
    //implement your cusotm functionality.
    alert("Copy event fired");
};

ng-cut
The ng-cut directive will be used to define custom behaviour/functionality on cut event.

Syntax

<input type="text" ng-model="cutval" ng-cut="cutevt();" />

$scope.cutevt = function () {
    //implement your cusotm functionality.
    alert("Cut event fired");
};

ng-paste
The ng-paste directive will be used to define custom behaviour/functionality on paste event.

Syntax

<input type="text" ng-model="pasteval" ng-paste="pasteevt();" />

$scope.pasteevt = function () {
    //implement your cusotm functionality.
    alert("Paste event fired");
};

Example

Copy the text in textbox.


Cut the text in textbox.


Paste some text in textbox.

Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        Copy the text in textbox.
        <br />
        <input type="text" ng-model="copyval" ng-copy="copyevt();" />
        <br />
        <br />
        Cut the text in textbox.
        <br />
        <input type="text" ng-model="cutval" ng-cut="cutevt();" />
        <br />
        <br />
        Paste some text in textbox.
        <br />
        <input type="text" ng-model="pasteval" ng-paste="pasteevt();" />
    </div>
    <script language="javascript">
        var myapp = angular.module("myApp", []);
        myapp.controller("myCntrl", function ($scope) {
            $scope.copyval = "Copy this text";
            $scope.copyevt = function () {
                //implement your cusotm functionality.
                alert("Copy event fired");
            };
            $scope.cutval = "Cut this text";
            $scope.cutevt = function () {
                //implement your cusotm functionality.
                alert("Cut event fired");
            };
            $scope.pasteval = "";
            $scope.pasteevt = function () {
                //implement your cusotm functionality.
                alert("Paste event fired");
            };
        });
    </script>
</body>
</html>

Read More...
Submited By : mrkraju On 27 Nov 2015

When you open a page which is developed using AngularJS in web browser, first it will display the uncompiled raw html. Once the angularjs compiled then it will show the compiled output so you will see the flicker/blink in html. To avoid the flicker/blink you can use the ng-cloak directive.

First add the below css in your style sheet at header level.

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{
    display: none !important;
}


The above css rule will hide all the html elements which are tagged with ng-cloak directive. While compilation angularjs will make the ng-cloak directive element visible.

Note
The ng-cloak directive can be given to body tag so that it will hide all the elements inside the body. But it is suggested that apply ng-cloak directive multiple small portions of the html page to permit progressive rendering of the browser view.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <style type="text/css">
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
        {
            display: none !important;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="SampleApp" ng-controller="SampleCntrl">
        <div id="template1" ng-cloak>
            {{ inputnumber }}</div>
    </div>
    <script>
        var myapp = angular.module("SampleApp", []);
        myapp.controller("SampleCntrl", function ($scope) {
            $scope.inputnumber = 48643589.456542;
        });
    </script>
</body>
</html>

Read More...
Submited By : mrkraju On 26 Nov 2015

AngularJS ng-if directive removes or recreate a part of the DOM based on the evaluated value of given {expression}. If the expression evaluated value returns false then it will remove the element from DOM. If the evaluated value is true then it will reinsert the clone of the element.

Difference between ng-if vs ng-show and ng-hide

1. The ng-if directive will destroy (completely removes) the element or recreate the element. Where as ng-show or ng-hide directive will set the visibility of the element to show or hide.

2. The ng-if directive will recreate the element with the clone of compiled time element when the expression value evaluated as true. That means if you created an element using ng-if and then applying some styles using javascript then if you destroy it (ng-if expression value false)and recreate the element again then all the styles applied using javascript will be gone. Where as if you use the ng-show or ng-hide directive to hide or show the element then the style applied using javascript will still remain after show or hide. Below example will give you a clear idea about it.

Demo Gif
ng-if example and diff between ng-if and ng-show


Live example





Select the above check box to show the message

ng-if example


Select the above check box to show the message

ng-show example

Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .ngifcls
        {
            background: #eee;
            padding: 10px;
            font-weight: bold;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
    <script language="javascript">
        function changestyle(chb) {
            if (chb.checked) {
                document.getElementById("divngifexmp").style.background = "#eee";
                document.getElementById("divngifexmp").style.padding = "10px";
                document.getElementById("divngshowexmp").style.background = "#eee";
                document.getElementById("divngshowexmp").style.padding = "10px";
            }
            else {
                document.getElementById("divngifexmp").style.background = "";
                document.getElementById("divngifexmp").style.padding = "";
                document.getElementById("divngshowexmp").style.background = "";
                document.getElementById("divngshowexmp").style.padding = "";
            }
        }
    </script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        <input type="checkbox" ng-model="showmessage" ng-init="showmessage=false;" name="chbshwmsg"
            id="chbshwmsg" />
        <label for="chbshwmsg">
            First Select Show Message</label>
        <br />
        <br />
        <input type="checkbox" onchange="changestyle(this);" name="chbaplycls" id="chbaplycls" />
        <label for="chbaplycls">
            Then Select Apply Class</label>
        <br />
        <br />
        <div>
            Select the above check box to show the message
            <br />
            <br />
            <div ng-if="showmessage" id="divngifexmp">
                ng-if example
            </div>
        </div>
        <br />
        <br />
        <div>
            Select the above check box to show the message
            <br />
            <br />
            <div ng-show="showmessage" id="divngshowexmp">
                ng-show example
            </div>
        </div>
    </div>
    <script language="javascript">
        var myapp = angular.module("myApp", []);
        myapp.controller("myCntrl", function ($scope) {

        });
    </script>
</body>
</html>

Read More...
Submited By : mrkraju On 25 Nov 2015

To write you first Hello World example in angularjs follow the below steps.

  • Add reference to AngularJS library in head tag.
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
  • Add directives ng-app & ng-controller.
    <div ng-app="myApp" ng-controller="myCntrl">
  • Add directive ng-model to textbox.
    <input type="text" ng-model="hellomodel" />
  • Now in angular javascript assign the defalut value for model "hellomodel"
    <script language="javascript">
        var myapp = angular.module("myApp", []);
        myapp.controller("myCntrl", function ($scope) {
            $scope.hellomodel = "Hello World!";
        });
    </script>
  • Thats all... now run the html page and change the text in the textbox the same will be binded to h1 tag.

Example
Change the text in the below textbox to see how ng-model will bind the model value to controls.

Enter text:


{{hellomodel}}


Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        Enter text:
        <br />
        <input type="text" ng-model="hellomodel" />
        <br />
        <br />
        <h1>
            {{hellomodel}}</h1>
        <script language="javascript">
            var myapp = angular.module("myApp", []);
            myapp.controller("myCntrl", function ($scope) {
                $scope.hellomodel = "Hello World!";
            });
        </script>
    </div>
</body>
</html>

Read More...
Submited By : mrkraju On 24 Nov 2015

This example shows you how to show monday as first column in AngularJS UI bootstrap datepicker. To show monday as first column we need to set startingDay property value to "1" in dateOptions.

Syntax

<input type="text" uib-datepicker-popup="{{dateformat}}" ng-model="dt" is-open="showdp" datepicker-options="dateOptions" />

$scope.dateOptions  = {
    startingDay: 1
};

Example
angular datepicker show Monday as first column

Source code

<html>
<head>    
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
</head>
<body style="Padding:20px;">
    <form>
    
    <div ng-app="myApp" ng-controller="myCntrl">
    Date: 
        <input type="text" uib-datepicker-popup="{{dateformat}}" ng-model="dt" is-open="showdp" datepicker-options="dateOptions" />
        <span>
            <button type="button" class="btn btn-default" ng-click="showcalendar($event)">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
    </div>
    <script language="javascript">
        angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
        angular.module('myApp').controller('myCntrl', function ($scope) {
            $scope.today = function () {
                $scope.dt = new Date();
            };
            $scope.dateformat="MM/dd/yyyy";
            $scope.today();
            $scope.showcalendar = function ($event) {
                $scope.showdp = true;
            };
            $scope.showdp = false;        
            $scope.dateOptions  = {
                startingDay: 1
            };
        });
    </script>
    </form>
</body>
</html>

Read More...
Submited By : mrkraju On 18 Nov 2015

To disable future date selection in AngularJS UI bootstrap datepicker we need to set the model value to max-date property as today's date.

Syntax

<input type="text" uib-datepicker-popup="{{dateformat}}" ng-model="dt" is-open="showdp" max-date="dtmax" />

Example

Source code

<html>
<head>    
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
</head>
<body style="Padding:20px;">
    <form>
    
    <div ng-app="myApp" ng-controller="myCntrl">
    Date: 
        <input type="text" uib-datepicker-popup="{{dateformat}}" ng-model="dt" is-open="showdp" max-date="dtmax" />
        <span>
            <button type="button" class="btn btn-default" ng-click="showcalendar($event)">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
    </div>
    <script language="javascript">
        angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
        angular.module('myApp').controller('myCntrl', function ($scope) {
            $scope.today = function () {
                $scope.dt = new Date();
            };
            $scope.dateformat="MM/dd/yyyy";
            $scope.today();
            $scope.showcalendar = function ($event) {
                $scope.showdp = true;
            };
            $scope.showdp = false;        
            $scope.dtmax = new Date();
        });
    </script>
    </form>
</body>
</html>

Read More...
Submited By : mrkraju On 18 Nov 2015
<< < 1 2 3 > >>




Search dotnetlearners.com