CODEWITHSUNDEEP
angularjsangularjs-scope
Nirbhay Gupta
Nirbhay Gupta

Reputation: 116

Angular JS object not binding into view

Here is a simple controller

I am creating a hardcoded object in the controller and want to bind it in the view, why I am doing this is right now I want to work representation of data of this kind.

I can't work on it because dataObject properties wont display on view 

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

app.controller('MainController',['$scope',function($scope){

$scope.databOject = { 
    venue:'Hauz Khas Social',
    date:'23-July-2015',
    data:{
        Point1 :{
            people:100,
            females:40,
            music:'EDM',
            musicSrc:'DJ',
            vibe:'upbeat',
            imgUrl:'',
            timeStamp:'',
            coordinates:{Lon:'',Lat:''}
        },
        Point2 :{
            people:100,
            females:40,
            music:'EDM',
            musicSrc:'DJ',
            vibe:'upbeat',
            imgUrl:'',
            timeStamp:'',
            coordinates:{Lon:'',Lat:''}
        },
        Point3 :{
            people:100,
            females:40,
            music:'EDM',
            musicSrc:'DJ',
            vibe:'upbeat',
            imgUrl:'',
            timeStamp:'',
            coordinates:{Lon:'',Lat:''}
        },
        Point4 :{
            people:100,
            females:40,
            music:'EDM',
            musicSrc:'DJ',
            vibe:'upbeat',
            imgUrl:'',
            timeStamp:'',
            coordinates:{Lon:'',Lat:''}
        }
    }
}

} 

}]);

Here is neat looking HTML 

  <!Doctype html>
  <html ng-app="NOL">
  <head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"> </script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 <script src="app.js"></script>

  </head>

  <body class="container" ng-controller="MainController">
      {{dataObject|json}}

      <div class="row">
          <h4>Venue:{{ dataObject.venue }} </h4>
          <h4>Date:{{ dataObject.date }}</h4>

          <input type="text" ng-model="text"> {{text}}

      </div>

  </body>
  </html>

Still the data won't bind

Upvotes: 0

Views: 399

Answers (1)

Suren Srapyan
Suren Srapyan

Reputation: 68635

To see what is wrong use F12 in the browser and you will see that

cannot read the property of undefined. dataObject is undefined.

Your variable is $scope.databOject, but you are using like dataObject. Extra b in the $scope.databObject

 <body class="container" ng-controller="MainController">
      {{dataObject|json}}

      <div class="row">
          <h4>Venue:{{ dataObject.venue }} </h4>
          <h4>Date:{{ dataObject.date }}</h4>

          <input type="text" ng-model="text"> {{text}}

      </div>

  </body>

enter image description here

Upvotes: 2

Related Questions