2016-07-22 6 views
0

Hier ist eine einfache SteuerungAngular JS Objektbindung nicht in Sicht

I ist in der Steuerung ein hartcodiertes Objekt erschaffe und wollen es in der Ansicht binden, warum ich das tue, ist jetzt will ich Arbeit Darstellung von Daten dieser Art.

Ich kann es

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:''} 
     } 
    } 
} 

} 

}]); 

Hier weil dataObject- Eigenschaften wont Display für die Ansicht nicht arbeiten, ist ordentlich suchen 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

+0

hier ist eine Arbeits Plunker Lösung https://plnkr.co/edit/ZK7SHvOXmSAmi8PhgYEk?p=preview. –

Antwort

2

was zu sehen ist falsche Verwendung F12 im Browser und Sie werden sehen, dass

kann nicht die Eigenschaft von undefined lesen. dataObject ist nicht definiert.

Ihre Variable ist $scope.databOject, aber Sie verwenden wie dataObject. Extra b im $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