I am currently in the process of learning Angular through a course, despite having limited experience with JavaScript. I have been struggling to make ng-class function properly and cannot figure out why I keep encountering the error mentioned in the title. Here is my hotels.js file:
'use strict'
//MODULE
var app = angular.module('hotelsApp', ['ngRoute']);
app.controller('HotelsController', ['$scope', function($scope){
$scope.rooms = mockRooms;
$scope.promoted = function(room) {
if(room.promotion !== null && room.promotion !== undefined) {
return true;
} else {
return false;
}
}
$scope.booking = function(room){
if(room.beds > 1){
alert(room.size + " with " + room.beds + " beds, is booked");
}
else
alert(room.size + " with " + room.beds + " bed, is booked");
};
}]);
var mockRooms = [{
"size": "studio",
"beds": 2,
"number": 100,
"kitchen": true,
"price": "100$",
"booked": false,
"promotion" : {
"discount" : "30%",
"message" : "Reserve it today!",
"price" : "70$"
}
},
{ "size": "queen",
"beds": 2,
"number": 101,
"kitchen": true,
"price": "35$",
"booked": true }
];
And here is my index.html:
<!DOCTYPE html>
<html lang="en-us" ng-app="hotelsApp">
<head>
<title>Hotels app</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" src="css/main.css" />
<script src="//code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.2/angular-route.min.js"> </script>
</head>
<body ng-controller="HotelsController">
<div ng-repeat="room in rooms">
<h4>{{ room.size }}</h4>
<p>Beds: {{ room.beds }}</p>
<p>Room number: {{ room.number }}</p>
<p ng-show="room.kitchen">
Kitchen available
</p>
<p ng-hide="room.promotion">
Price: {{ room.price }}
</p>
<p ng-class="{heavy:promoted(room)}" ng-hide="!room.promotion">
Save {{ room.promotion.discount }} {{ room.promotion.message }} Price: {{ room.promotion.price }}
</p>
<button ng-hide="room.booked" ng-click="booking(room)">Book now!</button>
</div>
<script src="app/hotels/hotels.js"></script>
</body>