ng-init : It should only be used for aliasing special properties of ng-repeat.
ng-include : It is used to embed an HTML page into another HTML page.
Let's see with an example:
Step 1: This is going to be the structure.Include angular.js or angular.min.js file. The file circled are going to be used.
ng-include : It is used to embed an HTML page into another HTML page.
Let's see with an example:
Step 1: This is going to be the structure.Include angular.js or angular.min.js file. The file circled are going to be used.
Step 2: In UsingIndex.js
var myapp = angular
.module("AngularModule", [])
.controller("AngularController", function ($scope) {
var Sports = [
{
SportName: "Cricket",
SportRequirement: [
{ RequirementName: "Bat" },
{ RequirementName: "Ball" },
{ RequirementName: "Gloves" }]
},
{
SportName: "Football",
SportRequirement: [
{ RequirementName: "Shoes" },
{ RequirementName: "Football" }]
}
];
$scope.Sports = Sports;
$scope.IncludeView = "../IncluePage.html";
});
Step 3: In ShowingIndexandIncludingHTML.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularModule">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/UsingIndex.js"></script>
</head>
<body ng-controller="AngularController">
<ul>
<li ng-repeat="Sport in
Sports" ng-init="parentIndex=$index">
{{Sport.SportName}} - index ={{$index}}
<ul>
<li ng-repeat="Requirement in
Sport.SportRequirement">
{{Requirement.RequirementName}} - ParentIndex = {{parentIndex}} - index ={{$index}}
</li>
</ul>
</li>
</ul>
<div ng-include="IncludeView"></div>
</body>
</html>
Step 4: In IncluePage.html
<h1>This Page is
Included</h1>
Step 5: Let's run the application
Posts
0 comments:
Post a Comment