I have multiple collections which i want to display as a vertical menu. So should I, for each menu, create a view and then load these views in one single-main view?
Here is what I want to achieve:
<div id="menu1">
<span><h2>MENU 1</h2><span>
<ul>
<li>menu1_link1</li>
<li>menu1_link2</li>
<li>menu1_link3</li>
<ul>
</div>
<div id="menu2">
<span><h2>MENU 2</h2><span>
<ul>
<li>menu2_link1</li>
<li>menu2_link2</li>
<li>menu2_link3</li>
<ul>
</div>
<div id="menu3">
<span><h2>MENU 3</h2><span>
<ul>
<li>menu3_link1</li>
<li>menu3_link2</li>
<li>menu3_link3</li>
<ul>
</div>
Should I create a model and a collection and a json file for each one of them?
I would create 3 collections, 1 for each menu.
Every menu item will be model. So you can render titles like this this.model.get('title')
"So should I, for each menu, create a view and then load these views in one single-main view?"
It depends on your file structure, you can achieve this multiple ways, do you use requirejs?
Related
My app has two views, A library view and a book view. From the first view (library), the user selects an object and it loads the second view (book) with the selected objects data. From there I'd like to display the json object before and after the selected object. I'm struggling with how to load these ancillary objects data into the view. One idea I had was to create a service with an array of the previous item, selected item, and next item in it, however I only know how to load the selected item's data into the array from the library view.
Thoughts? even a point in the right direction would be incredibly helpful.
Thank you!
The library view:
<ul id="Library">
<li class="bookend" ng-repeat="book in library" ng-click="open_book(book)"></li>
</ul>
and the Library controller:
$scope.open_book = function(book){
var selected_book_path = '/books/' + book.id;
$location.path(selected_book_path);
};
which loads the Book view:
<div id="Book">
<h1 class="book-title">{{ book.title }}</h1>
<h2 class="book-author">{{ book.author }}</h2>
<h2 class="book-year">{{ book.year }}</h2>
</div>
Within the book view, I also want to load the data before and after the selected book.
This will be very easy for you Angular monsters out there. I have two views ( a list view and a grid view) each in a partial html that is injected via ng-include on a click of a button. Like this:
<div class = "bar">
<h1>Contacts</h1>
</div>
<div ng-show="layout == 'list'" class="list">
//ng-include for the list page is here
</div>
<div ng-show="layout == 'grid'" class="grid">
//ng-include for the grid page is here
</div>
How can I initiate one of those views? grid for instance. I imagine it's done with ng-init. but I can't figure it out
Thanks!
You can initialize an variable either using ng-init or in controller variable declaration:
ng-init="layout === 'list'"
$scope.layout = 'list'
Using AngularJS, I have a list of messages that I display in a div that is marked as pre-scrollabe and inside is a bootsrtap list-group to display the individual messages:
<div class="pre-scrollable">
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in MessageList">
<!--Directive to Display Messages-->
</li>
</ul>
</div>
This yields the result that i want, a list of messages through which I can scroll. However I would like to know if there is a way that I can scroll to the top (or even the bottom for that matter) of the list using a JS function?
I have a Breadcrumb navigation that allows users to toggle between two partial views (pvA and pvB).
<ol class="breadcrumb">
<li>pvA</li>
<li>pvB</li>
</ol>
<div id="pvA" name="pvA" ng-if="partialViewIdToShow === 1">
#Html.Partial("_pvA")
</div>
<div id="pvB" name="pvB" ng-if="partialViewIdToShow === 2">
#Html.Partial("_pvB")
</div>
What is best practice to share data between these two views?
The data shared between the two views comes from the same database table.
If data is added to pvA it should be available in pvB and visa versa.
Hey I'm looping thru an array using ng-repeat in my template. The list spits out 9 list elements and I would like change the background color of the selected list element but I want to do it in a way where multiple ones can be selected and the color of the selected ones with a different background color. Initially I had passed $event to the click function on the list element and added a class to event.target but that put the class on all the list elements rather than the selected one.
<ul>
<li class="info-items"
ng-repeat="card in config.cards"
ng-class="{'error-border': emptyCardsArray}">
<div class="inner-text"
ng-model="userSelection.cards"
ng-click="addCard(card.name, $event)">{{card.name}}{{$index + 1}}</div>
</li>
</ul>
HTML:
$(event.target).addClass('active.cards');
JS:
The list that I'm repeating thru unforunately doesn't have a unique ID or I would have passed in the ID and created a condition to check whether the selected items have one and applied the class.
It's a much better practice to simply use ng-class for this.
<ul>
<li class="info-items"
ng-repeat="card in config.cards"
ng-class="{'error-border': emptyCardsArray}">
<div class="inner-text"
ng-model="userSelection.cards"
ng-class="active.cards">{{card.name}}{{$index + 1}}
</div>
</li>
</ul>