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>
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>
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>
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>
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>
Image 23.
Image 24.