Using ng bind directive:
<html>
<script src="angular.min.js"></script>
<script src="angular.min.js"></script>
<body>
<div ng-app="" ng-init="quantity=23;cost=53">
<p>Total: <span ng-bind="quantity * cost"></span></p>
</div>
</body>
</html>
output:
Angular JS Arrays:
Same example with ng-bind directive:
Using Angular Js Strings:
Angular Js Expression vs Javascript Expressions
Angular
js
|
Javascript
|
It
supports Filters
|
It
does not support filters
|
It
can be written inside HTML
|
It
cannot be written inside HTML
|
It
does not support conditional loops
|
It
supports conditional looops
|
ng-repeat Directive:
It is similar to foreach loop in C Sharp, this is used to iterative each collection items.
Example:
Javascript Code:
/// <reference path="angular.min.js" />
var myapp = angular.module("myapp", [])
.controller("mycontroller", function ($scope) {
var employee = [
{ FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad" },
{ FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai" },
{ FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi" }
];
$scope.employees = employee;
});
Default.aspx
<html>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
<div ng-app="myapp" ng-controller="mycontroller">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.FirstName}}</td>
<td>{{employee.LastName}}</td>
<td>{{employee.Gender}}</td>
<td>{{employee.Address}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Example:
<html>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
<div ng-app="myapp" ng-init = "states = [
{capital:'Hyderabad',name:'Telangana'},
{capital:'Chennai',name:'TamilNadu'},
{capital:'Bangalore',name:'Karnataka'}
]">
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "st in states">
{{ 'Country: ' + st.name + ', StateCapital: ' + st.capital }}
</li>
</ol>
</div>
</body>
</html>
Output:
Javascript Code:
/// <reference path="angular.min.js" />
var myapp = angular.module("myapp", [])
.controller("mycontroller", function ($scope) {
var studentDetails = [
{
Class: 'V Standard',
Names:
[
{ StudentName: "Rajakond Uday" },
{ StudentName: "Kumar" },
{ StudentName: "ABC" }
]
},
{
Class: 'VI Standard',
Names:
[
{ StudentName: "D" },
{ StudentName: "SD" },
{ StudentName: "ABC" }
]
},
{
Class: 'VII Standard',
Names:
[
{ StudentName: "DSS" },
{ StudentName: "SS" },
{ StudentName: "ABDC" }
]
}
];
$scope.Students = studentDetails;
});
Default Page:
<html>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
<div ng-app="myapp" ng-controller="mycontroller">
<ul>
<li ng-repeat="cls in Students">
{{ cls.Class }}
<ul>
<li ng-repeat="student in cls.Names">
{{ student.StudentName}}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Output:
No comments:
Post a Comment
Thank you for visiting my blog