2016-07-22 52 views
0

下面是一个简单的控制器角JS对象未绑定到视图

我创建一个控制器中的硬编码的对象,并需要将其绑定在视图中,为什么我这样做是正确的,现在我想这种数据的工作表示。

我不能,因为dataObject时工作性质惯于在视图显示

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

} 

}]); 

这里是整齐寻找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

这里是一个工作plunker解决方案https://plnkr.co/edit/ZK7SHvOXmSAmi8PhgYEk?p=preview。 –

回答

2

要看看是什么错误使用F12在浏览器中,您将看到

无法读取未定义的属性。 dataObject是未定义的。

您的变量是$scope.databOject,但是您正在使用像dataObject。额外b$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