Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

AnguarJS Recipe - Part 3

Article:
Viewed:  943 
Posted On:  22/04/2015 20:23:06 
This is the continuation of my previous article. AnguarJS Recipe - Part 2. 

 

This is the continuation of AnguarJS Recipe - Part 2

http://www.dotnetcodesg.com/Article/UploadFile/2/14409/AnguarJS%20Recipe%20-%20Part%202.aspx


# Showing Data in a Table after reading from Controller external File

My external Controlller File.

angular.module('myApp', []).controller('employeeCtrl', function ($scope) {
    $scope.Emp_Names = [
        { name: 'Rahul Saxena', country: 'India' },
        { name: 'Shambhu Sharma', country: 'USA' },
        { name: 'Abhishek Nigam', country: 'USA' },
        { name: 'Yogesh Gupta', country: 'USA' },
        { name: 'Rakesh Dixit', country: 'India' },
        { name: 'Manu Khanna', country: 'India' },
        { name: 'Saurabh Mehrotra', country: 'USA' },
        { name: 'mayank Dhulekar', country: 'India' }
    ];
});

<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="employeeController.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="myApp" ng-controller="employeeCtrl">
            <table style="border:1px solid;" border="1">
                <tr ng-repeat="x in Emp_Names">
                    <td style="width:200px;">{{ x.name }}</td>
                    <td style="width:200px;">{{ x.country }}</td>
                </tr>
            </table>           
        </div>
    </form>
</body>
</html>


19.png

Image 19.

# Showing Record from External Controller File in a Table with CSS style sheet:

My external Controlller File.

angular.module('myApp', []).controller('employeeCtrl', function ($scope) {
    $scope.Emp_Names = [
        { name: 'Shambhu Sharma', country: 'USA' },
        { name: 'Rahul Saxena', country: 'India' },       
        { name: 'Abhishek Nigam', country: 'USA' },
        { name: 'Shraddha Gaur', country: 'India' },
        { name: 'Shweta Kashyap', country: 'India' },
        { name: 'Yogesh Gupta', country: 'USA' },
        { name: 'Rakesh Dixit', country: 'India' },
        { name: 'Manu Khanna', country: 'India' },
        { name: 'Saurabh Mehrotra', country: 'USA' },
        { name: 'Mayank Dhulekar', country: 'USA' },
        { name: 'Akhilesh Atwal', country: 'India' }
    ];
});

<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
 
            table tr:nth-child(odd) {
                background-color: red;
                  color:yellow;
                  font-family:Verdana;
            }
 
            table tr:nth-child(even) {
                background-color: blue;
                color:white;
                font-family:Arial;
            }
    </style>
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="employeeController.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="myApp" ng-controller="employeeCtrl">
            <table style="border: 1px solid;" border="1">
                <tr ng-repeat="x in Emp_Names">
                    <td style="width: 200px;">{{ x.name }}</td>
                    <td style="width: 200px;">{{ x.country }}</td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

20.png 

Image 20.

# Showing Records In a Table with Index Value:

My external Controlller File.

angular.module('myApp', []).controller('employeeCtrl', function ($scope) {
    $scope.Emp_Names = [
        { name: 'Shambhu Sharma', country: 'USA' },
        { name: 'Rahul Saxena', country: 'India' },       
        { name: 'Abhishek Nigam', country: 'USA' },
        { name: 'Shraddha Gaur', country: 'India' },
        { name: 'Shweta Kashyap', country: 'India' },
        { name: 'Yogesh Gupta', country: 'USA' },
        { name: 'Rakesh Dixit', country: 'India' },
        { name: 'Manu Khanna', country: 'India' },
        { name: 'Saurabh Mehrotra', country: 'USA' },
        { name: 'Mayank Dhulekar', country: 'USA' },
        { name: 'Akhilesh Atwal', country: 'India' }
    ];
});

<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
 
            table tr:nth-child(odd) {
                background-color: red;
                color: yellow;
                font-family: Verdana;
            }
 
            table tr:nth-child(even) {
                background-color: blue;
                color: white;
                font-family: Arial;
            }
    </style>
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="employeeController.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="myApp" ng-controller="employeeCtrl">
            <table style="border: 1px solid;" border="1">
                <tr ng-repeat="x in Emp_Names">
                    <td>{{ $index + 1 }}</td>
                    <td style="width: 180px;">{{ x.name }}</td>
                    <td style="width: 180px;">{{ x.country }}</td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

21.png

Image 21.

# using if condition in AngularJS With Even and Odd in a Table

My external Controlller File.

angular.module('myApp', []).controller('employeeCtrl', function ($scope) {
    $scope.Emp_Names = [
        { name: 'Shambhu Sharma', country: 'USA' },
        { name: 'Rahul Saxena', country: 'India' },       
        { name: 'Abhishek Nigam', country: 'USA' },
        { name: 'Shraddha Gaur', country: 'India' },
        { name: 'Shweta Kashyap', country: 'India' },
        { name: 'Yogesh Gupta', country: 'USA' },
        { name: 'Rakesh Dixit', country: 'India' },
        { name: 'Manu Khanna', country: 'India' },
        { name: 'Saurabh Mehrotra', country: 'USA' },
        { name: 'Mayank Dhulekar', country: 'USA' },
        { name: 'Akhilesh Atwal', country: 'India' }
    ];
});

<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="employeeController.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="myApp" ng-controller="employeeCtrl">
            <table style="border: 1px solid;" border="1">
                <tr ng-repeat="x in Emp_Names">
                    <td ng-if="$odd" style="background-color: #1E90FF; width: 190px;">{{ x.name }}</td>
                    <td ng-if="$even" style="background-color: #FF00FF; width: 190px;">{{ x.name }}</td>
                    <td ng-if="$odd" style="background-color: #FF4500; width: 190px;">{{ x.country }}</td>
                    <td ng-if="$even" style="background-color: #9ACD32; width: 190px;">{{ x.country }}</td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

22.png

Image 22.

# Make disable button on Check Box Click..

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>     
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="">
           <p>
                <button ng-disabled="mySwitchClick">Submit</button>
            </p>
            <p>
                <input type="checkbox" ng-model="mySwitchClick">Make Button Enable/Disable
            </p>
        </div>
    </form>
</body>
</html>
 
23.png 

Image 23.

24.png

Image 24.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us