Angular.js: 10671 ТипError: Невозможно прочитать свойство undefined

Я пытаюсь научиться угловатым, следуя курсу, и у меня нет большого опыта работы в javascript. Я просто не могу заставить ng-class работать и не могу понять, почему я попадаю в названную ошибку. Это мой hotels.js файл:Angular.js: 10671 ТипError: Невозможно прочитать свойство undefined

'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 }  
];

И это мой 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>

источник

2016-04-14 Marco

Все остальное, кроме ng-класса, работает как ожидалось? –

да, все остальное работает просто отлично – Marco

Correct эти строки. Ваши ссылки все сломаны:

<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>

Просьба поставить «https: //» infront всех cdn.

Используйте эти годы: CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />  
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>

источник

2016-04-14 13:11:48 Deadpool

Я сделал, как вы сказали, но ничего не меняет. – Marco

Bro посмотреть мой снимок. Думаю, ты хочешь этого? – Deadpool

Я хочу, чтобы он применял класс .havy к элементу p, и этого не происходит, даже когда я использую ваш cdn's – Marco

Это была глупая ошибка, если я меняю в связи с Main.css ЦСИ в HREF, все работает отлично. Просто не уверен, почему консоль выдала ошибку неопределенного свойства раньше, что меня смутило.

<link rel="stylesheet" type="text/css" href="css/main.css" />

источник

2016-04-14 13:44:47 Marco

Человек, этот вопрос получил меня. Пожалуйста, замените src на href в теге link для загрузки пользовательского css и попробуйте перезагрузить страницу.

Все правильно, за исключением того, что ваш css не загружается.

источник

2016-04-14 13:46:46

Да, как я писал в своем ответе, я увидел, что это была ошибка, просто не уверен, почему консоль сначала выбрасывает эту ошибку, а потом все отлично работает. – Marco

Angular.js: 10671 ТипError: Невозможно прочитать свойство undefined

ответ

Смежные вопросы