I am trying to compile a filters page in angular.js . There are four files in my mainly app.js , controllers.js (controllers js file containing controllers and scope), Filters.html(html file for filters) , directives.js(customised directives js file) , and angular.js(using basic angular js library) with the respective functionality . While page loading , I am getting angular expressions with brackets i.e data is not fetched in the scope from controllers and it shows {{..}} in the web page . Can someone suggest whats wrong .. Have posted my code of all files below :
Filters.html :
<html ng-app="app">
<head>
<title>Angular Filters</title>
<link href="style/style.css" rel="stylesheet"/>
<script src="lib/Angular/angular.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/app.js"></script>
<style>
.css-table-cell
{
border: 1px solid black;
}
</style>
</head>
<body ng-controller="registerReportCtrl">
<section ng-class="{fontSize: fs, redClass:true}">
<header>
<header-Line title="heading"></header-Line>
</header>
</section>
<h2 class="center"> {{"Report on :" + title}} </h2>
<section class="center" style='width:50%'>
<label>Sort By:</label>
<select ng-model="sortBy">
<option value="levelOfTraining">LevelOfTraining-increasing order</option>
<option value="costOfTraining">CostOfTraining-increasing order</option>
<option value="-levelOfTraining">LevelOfTraining-decreasing order</option>
<option value="-costOfTraining">CostOfTraining-decreasing order</option>
</select><br><br>
<label>Filter By:</label>
<input type="text" ng-model="filterBy"/>
</section> <br><br>
<section class="css-section" >
<form class="css-form">
<section class="css-table" >
<!-- headers -->
<section class="css-table-row" >
<section class="css-table-cell">
<label class="css-tableheader">Sl No.</label>
</section>
<section class="css-table-cell">
<label class="css-tableheader">Username</label>
</section>
<section class="css-table-cell">
<label class="css-tableheader">Course Selected</label>
</section>
<section class="css-table-cell">
<label class="css-tableheader">Level Of Training</label>
</section>
<section class="css-table-cell">
<label class="css-tableheader">Date Of Registration</label>
</section>
<section class="css-table-cell">
<label class="css-tableheader">Cost Of Training</label>
</section>
</section>
<section class="css-table-row" ng-repeat="request in requests| orderBy: sortBy | filter:filterBy">
<section class="css-table-cell">
<label>{{$index + 1}}</label>
</section>
<section class="css-table-cell">
<label>{{request.username}}</label>
</section>
<section class="css-table-cell">
<label>{{request.courseSelected| uppercase | limitTo :"3"}}</label>
</section>
<section class="css-table-cell">
<label>{{request.levelOfTraining| lowercase}}</label>
</section>
<section class="css-table-cell">
<label>{{request.dateOfRegistration| date: 'shortDate'}}</label>
</section>
<section class="css-table-cell">
<label>{{request.costOfTraining| currency: "Rs." }}</label>
</section>
</section>
</section>
</form>
</section>
<br>
<section class="center">Total number of requests:{{requests.length|number:2}}</section>
</body>
</html>
app.js
var app = angular.module("app" ,["controllers",'directives']);
Directives.js
var directives = angular.module("directives", []);
//directive as element
directives.directive('headerLine', function () {
return {
restrict: 'E',
scope: {
'head': '=title'
},
template: '<h2> {{ head }}</h2>'
}
});
//directive as attribute
directives.directive('footerLine', function () {
return {
restrict: 'A',
scope: {
'footer': '=title'
},
template: '<h2> {{ footer }}</h2>'
}
});
//directive as class
directives.directive('classDirective', function () {
return {
restrict: "C",
link: function ($scope, element) {
element.bind("mouseenter", function () {
element.css("border-radius", "10px");
element.css("background-color", "orange");
});
}
};
});
//directive as comment
directives.directive('commentDirective', function () {
return {
restrict: "M",
link: function () {
console.log("Using directive as comment.");
}
};
});
Controllers.js
controllers.controller('registerReportCtrl',['$scope', function($scope){
$scope.heading="Example for Filters";
$scope.title="Course Registrations";
$scope.requests=[
{
username:'Jack',
courseSelected:'AngularJS',
levelOfTraining:'Basic',
dateOfRegistration: new Date(),
costOfTraining: 18000
},
{
username:'Tom',
courseSelected:'AngularJS',
levelOfTraining:'Intermediate',
dateOfRegistration: new Date(),
costOfTraining: 25000
},
{
username:'Alice',
courseSelected:'AngularJS',
levelOfTraining:'Advanced',
dateOfRegistration: new Date(),
costOfTraining: 35000
},
{
username:'Vinu',
courseSelected:'BackboneJS',
levelOfTraining:'Basic',
dateOfRegistration: new Date(),
costOfTraining: 15000
},
{
username:'Niel',
courseSelected:'BackboneJS',
levelOfTraining:'Intermediate',
dateOfRegistration: new Date(),
costOfTraining: 23000
},
{
username:'Jasmine',
courseSelected:'HTML',
levelOfTraining:'Basic',
dateOfRegistration: new Date(),
costOfTraining: 3000
},
{
username:'Daniel',
courseSelected:'CSS3',
dateOfRegistration: new Date(),
levelOfTraining:'Advanced',
costOfTraining: 10000
}
];
}]);
