arrays - How to show content in div based on json data -
i working on angularjs app has ng-view routes. in object have option of showonhome, show product if value set true , hide if set false.
in nodejs server:
app.get('/cameras/:id', function(req, res){ var cameraid = parseint(req.params.id); var data = {}; (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 @ f1.2 , 0 lux ir on", "42 units of ir leds ir range of 30m", "supports dual streaming", "supports mobile surveillance via ios, android, windows mobile, blackberry", "supports plug , 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>
try bubble ngshow
/ngif
:
<div class="row" ng-if="cam.showonhome" ng-repeat="cam in cameras">
if put inside, outer div still rendered.
also, initialize var cameras
(for debug purpose?).
should $scope.cameras
access in controller template.
Comments
Post a Comment