CODEWITHSUNDEEP
javascripthtmlangularjs
Omar Herrera
Omar Herrera

Reputation: 63

ng-binding, $scope variable empty when called in html

the variable comes empty when binded on html

HTML code:

<html lang="en" ng-app="roomInfo">
...

<div id="modal" ng-controller="roomListCtrl" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">{{ room[0].name }}

JS code:

 var roomInfo = angular.module('roomInfo', []);

roomInfo.controller('roomListCtrl', function ($scope, $http) {

    $http.get("/room-list-info/").then(function(response) {
        $scope.rooms = response.data;
    });

    $scope.getRoom = function (id) {
        var url = "/room-info/"+ id +"/";
        console.log(id);
        $http.get(url).then(function(response) {
            $scope.room = response.data;
            console.log($scope.room[0].name + "hola");
        });
    };


});

The console.log() shows the info that i want but for some reason it doesnt go to the html Also the rooms[0].name works just the room[0].name doesnt work

Upvotes: 1

Views: 668

Answers (2)

SSH
SSH

Reputation: 2553

Looks like you call $scope.getRoom outside of Angular context. You either need to use Angular bindings like ng-click, or manually do $scope.$apply.

Upvotes: 1

Steeve Pitis
Steeve Pitis

Reputation: 4453

At the beginning $scope.rooom[0] is undefined so angular crash when you want room[0].name. try this {{ room[0] ? room[0].name: '' }}

Upvotes: 0

Related Questions