I am trying to have a single-page Angular-App which has a view in the middle and tools like sidebar and topbar around that. But when the user is not logged in, the view should show a login partial and the side- and topbar should be hidden. As well as there should be a fullscreen background image. I got a working attempt, but it's rather ugly, so I wonder how I could do better:
<body ng-app ="MB">
<div ng-controller="mbMainCtrl as mainCtrl" class="container-fluid">
<!--fullscreen background when not logged in-->
<div ng-hide="$root.loggedIn" class="landing" ng-cloak>
</div>
<div>
<div ng-show="$root.loggedIn" class="row">
<mb-topbar></mb-topbar>
</div>
<div class="row">
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<mb-sidebar></mb-sidebar>
</div>
<!--view always visible, loads the login page as well-->
<div class = "col-sm-6">
<div ng-view></div>
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<div class="row">
<div mb-news-feed-dir></div>
</div>
<div class="row">
<div mb-quest-feed-dir></div>
</div>
</div>
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
</div>
</div>
</div>
...
</body>
I suggest you use ui-router and have a nested view to accomplish something like this in a more clean way without having to hide and show dom elements.
Related
I have a layout in mind that I'd like to look like this on a desktop monitor. It more or less works right now but I wonder if the 'D' and 'E' sections should be col-md-6 or col-md-3?
Desktop Layout
Also, (and this is where it gets interesting), on mobile I'd like it to be layed out like this:
Mobile Layout
Can one single layout work? I'm busy on the desktop layout but, yeah, everytime I switch to the mobile view things are not good. Therefore, I have a feeling my initial approach leaves something to be desired.
Solution code:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-push-3">
<div class="row">
<div class="col-xs-12">
<section class="box">B</section>
</div>
<div class="col-xs-6">
<section class="box">D</section>
</div>
<div class="col-xs-6">
<section class="box">E</section>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-md-pull-6">
<section class="box">A</section>
</div>
<div class="col-xs-6 col-md-3">
<section class="box">C</section>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<section class="box">F</section>
</div>
<div class="col-xs-6">
<section class="box">G</section>
</div>
</div>
</div>
This is a simple question, but for some reason, I'm not getting the desired result.
Here's a snippet of the code inside my index.html file
<div class="container">
<div class="row">
<div class="col-xs-1">
<div ui-view="sidebar"></div>
</div>
</div>
<div class="row">
<div class="col-xs-11">
<div ui-view="content"></div>
</div>
</div>
</div>
What I'm hoping will happen is that the sidebar will take up 1 column and the rest of it will take up the remaining columns. However, when I view the page, the sidebar and the content are shown stacked on top of each other. Am I not allowed to put a ui-view inside a div container?
Try to write 2 columns in same row:
<div class="container">
<div class="row">
<div class="col-xs-1">
<div ui-view="sidebar"></div>
</div>
<div class="col-xs-11">
<div ui-view="content"></div>
</div>
</div>
</div>
i have this code for displaying images using slick.js.
<div>
<slick infinite="true" slides-to-show="4" slides-to-scroll="1">
<div ng-repeat="var in myArray" class="slick-item">
<div class="truckImage truck-error"></div>
</div>
</slick>
</div>
and below is the output.
if i use three different divs than it works fine but not with ng-repeat.
instead it should come in a single row as originally slick js works.
Try by adding a data attribute to your declaration
Example,
<slick infinite="true" data="myArray" slides-to-show="4" slides-to-scroll="1">
<div ng-repeat="var in myArray" class="slick-item">
<div class="truckImage truck-error"></div>
</div>
</slick>
<div>
<slick infinite="true" slides-to-show="4" slides-to-scroll="1">
<div class="row">
<div ng-repeat="var in myArray" class="slick-item">
<div class="col-md-4 truckImage truck-error"></div>
</div>
</div>
</slick>
</div>
I think it will work for you, let me know if it is not working. i have just added <div class="row"> and then <div class="col-md-4 truckImage truck-error"></div>
I have an array of products. I would like to display them in rows, with 4 products per row. Right now my code is
<div ng-repeat="product in products" class="col-md-3">
<p> {{product.name}} </p>
<p> {{product.price}} </p>
</div>
However, this is not displaying properly. I have tried to incorporate rows with an ng-if, but this is as close as I've come:
<div ng-repeat="product in products">
<div ng-if="$index %4 == 0" class="row">
<div class="col-md-3">
(content)
</div>
</div>
<div ng-if="$index %4 != 0" class="col-md-3">
(content)
</div>
</div>
I think I know why the above doesn't work: if index %4 != 0then the column that is created is not actually put inside of the row made before.
Is there an angular way to do this? Do I need a custom directive? Note: I have managed a solution not using angular directives but it doesn't seem clean, so I would like to do it "angularly" if possible.
You should be able to use your first method just fine, here's the html I wired up in a js fiddle:
<div ng-app="app">
<div ng-controller="ParentCtrl">
<div class="container">
<div class="row">
<div data-ng-repeat="option in options" class="col-md-3">
{{ option }}
</div>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/ubexop9p/
You will have to play around with the frame sizes if your monitor is too small, but I was able to get it do what you wanted.
Do you have that wrapped in a container or container-fluid? I believe that's required for the grid system to work.
<div class="container">
<div class="col-md-3">Col 1</div>
<div class="col-md-3">Col 2</div>
<div class="col-md-3">Col 3</div>
<div class="col-md-3">Col 4</div>
<div class="col-md-3">Col 5</div>
</div>
Turns out it was a problem with the content I was putting inside the columns, the code I posted does in fact work.
What's the best practice of toggling elements in nested ng-repeaters? I have the following angular template:
<div>
{{question.Description}}
<div ng-repeat="answer in question.Answers">
{{answer.Description}}
<div ng-repeat="qAnswer in answer.Questions"><!-- Hide/show here -->
{{qAnswer.Description}}
<div ng-repeat="childAnswer in qAnswer.Answers"><!-- Hide/show here -->
{{childAnswer.Description}}
</div>
</div>
</div>
</div>
Edit:
I'd like to toggle based on click action
<div>
{{question.Description}}
<div ng-repeat="answer in question.Answers">
{{answer.Description}}
<div ng-repeat="qAnswer in answer.Questions" ng-show="answer.show"><!-- Hide/show here -->
{{qAnswer.Description}}
<div ng-repeat="childAnswer in qAnswer.Answers" ng-show="qAnswer.show"><!-- Hide/show here -->
{{childAnswer.Description}}
</div>
</div>
</div>
</div>
u need to set the object value to true or false, then angularjs will do the rest.
Try something like this,
<div ng-init="items_display=[]">
{{question.Description}}
<div ng-repeat="answer in question.Answers">
{{answer.Description}}
<div ng-repeat="qAnswer in answer.Questions"><!-- Hide/show here -->
{{qAnswer.Description}}
<div ng-repeat="childAnswer in qAnswer.Answers" ng-show="items_display[$index]"><!-- Hide/show here -->
{{childAnswer.Description}}
</div>
</div>
</div>
</div>