Question

I have a single page that will display multiple partials, depending on the database values. AT the moment i am just using show/hide to display the div however I would like to do it the proper Angular way, I have been having trouble with it though.

My routes.js is

exports.index = function(req, res){
  res.render('index');
 };

exports.partials = function (req, res) {
 var name = req.params.name;
  res.render('partials/' + name);
};

My Controller is

function AppCtrl($scope, $http, $q, socket, $location) {

$scope.config = [[ return variables from HTTP call ]]

if($scope.config.name =='video') $scope.mainpVideo ==true;
else $scope.mainpVideo ==false;

if($scope.config.name =='audio') $scope.mainpAudio ==true;
else $scope.mainpAudio ==false;

if($scope.config.embed =='qa') $scope.qa ==true;
else $scope.qa ==false;

Index.jade

         #box-1-content.auth-form-body(ng-show="mainpAudio"  )
              include partials/audio 
              ul.presenterList
                li Presenters:
                li(ng-repeat='presenter in presenters' ){{ presenter.name }}
              br.clr  

             #box-1-content.auth-form-body(ng-show="mainpVideo" )
              include partials/video 
              ul.presenterList
                li Presenters:
                li(ng-repeat='presenter in presenters' ){{ presenter.name }}
              br.clr      

         #box-2-content.auth-form-body(ng-show="qa" )
              include partials/qa 
              br.clr      

.......

As said its a single page and there would be multiple partials included depending on the config store in the database, how can this be done?

Was it helpful?

Solution 2

I had solved it by using the ng-switch-when and setting the 2 variables in scope

OTHER TIPS

I don't know Jade, but I'm guessing something like

div(ng-include="'partials/' + config.name")

will do what you want.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top