2016-05-28 61 views
0

我正在使用AngularJs應用程序,它具有ng-view和路線。在對象中,我有showOnHome的選項,如果值設置爲true,我想顯示一個產品,如果設置爲false,則顯示爲hide。如何根據json數據顯示div中的內容

在服務器的NodeJS:

app.get('/cameras/:id', function(req, res){ 
var cameraId = parseInt(req.params.id); 
var data = {}; 
for (var i=0, len=cameras.length; i<len; i++){ 
    if(cameras[i].id === cameraId){ 
     data = cameras[i]; 
     break; 
    } 
} 
res.json(data); 
}); 

app.get('/cameras', function(req, res){ 
res.json(cameras); 
}); 

var cameras = [ 
         { 
         "id": 1, 
         "title": "BVO473N 850TVL IR Dome Camera", 
         "features": [ 
          "2.0 Megapixel CMOS image sensor", 
          "2 megapixel high definition image quality", 
          "Minimum illumination of 0.1 Lux at F1.2 and 0 Lux with IR On", 
          "42 units of IR LEDs with an IR range of up to 30m", 
          "Supports dual streaming", 
          "Supports mobile surveillance via iOS, Android, Windows Mobile, BlackBerry", 
          "Supports plug and play - no port forwarding or networking knowledge required", 
          "Ingress Protection rating of IP66", 
          "Power Supply: DC 12V" 
         ], 
         "picture": "images/cam-look.png", 
         "showOnHome": true, 
         }, 
         ]; 


<div class="row" ng-repeat="cam in cameras"> 
      <hr ng-if="!$first" /> 
      <div ng-show="cam.showOnHome"> 
       <div class="col-sm-4 col-sm-push-8"> 
        <img ng-src="{{cam.picture}}" alt="Description"  class="img-responsive" /> 
       </div> 

       <div class="col-sm-8 col-sm-pull-4"> 
        <p class="lead">{{ cam.title }}</p> 
        <ul class="specs list-unstyled"> 
         <li ng-repeat="feature in cam.features">{{ feature  }}</li> 
        </ul> 
        <strong class="more"><a href="#/product/{{ cam.id  }}">Learn More</a></strong> 
       </div> 
      </div> 

      </div> 
+0

那麼,你的問題是什麼? –

+0

我無法根據showOnHome的值顯示/隱藏項目 – user1250285

回答

1

嘗試泡你ngShow/ngIf

<div class="row" ng-if="cam.showOnHome" ng-repeat="cam in cameras"> 

如果你把內,外格仍然呈現。

此外,您初始化var cameras(用於調試目的?)。
它應該是$scope.cameras在您的控制器模板中訪問它。

+0

嘗試過這不起作用。它在工廠還需要使用$ scope嗎? – user1250285

+0

如果我不能看到您的工廠代碼,我該如何幫助您?無論如何,模板使用自己的'$ scope'變量。您應該將其分配給訪問權限。將'{{cameras}}'寫入模板以查看您是否正確分配它。 –