Wie zeige ich Inhalt in div basierend auf JSON-Daten

Question

Ich arbeite an einer AngularJs-App, die ng-view mit Routen hat. Im Objekt habe ich eine Option von showOnHome, ich würde gerne ein Produkt zeigen, wenn der Wert auf "true" gesetzt ist und "hide", wenn er auf "false" gesetzt ist.

Im NodeJS Server:

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> 

Answer 1

zu sprudeln Versuchen Sie Ihr ngShow/ngIf:

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

Wenn Sie nach innen setzen, äußere div noch gemacht.

Sie initialisieren auch var cameras (für Debug-Zwecke?).
Es sollte $scope.cameras sein, um in Ihrer Controller-Vorlage darauf zuzugreifen.