angular-js angular-strap and ng-grid integration? - javascript

Say, I've got multiple tabs and I want to use angular-straps to display that. However, the content of each tab is dynamic based on an ajax call for that given tab. Ideally could be derived from the tab id.
| Tab 1 | Tab 2| Tab 3|
So when Tab 1 is clicked, a call to the server is /get/result/tab1_id/ and when Tab 2 is clicked, a call to the server is /get/result/tab2_id etc... And use this result to populate a ng-grid somehow.
Angular has a lot of potential, but I am so new to it and a lot of ways of doing things and I am not good in any. This stuff can be done in jquery in no time with jtable etc.. but I am trying to learn angular js.
So please help.
Thanks & regards
Tin

To determine which tab is clicked, you can do
<div data-fade="1" ngModel="activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{tab.title}}" ng-click="loadData()"><p>{{tab.content}}</p></div>
</div>
In the controller, you can do:
$scope.loadData = function(){
switch(activeTab){
case 0:
//load data
break;
case 1:
....
}
}
To load data, you can look at $http or $resource module.

Related

instant search dome how to apply OR in typesense

i have following menu in my dashboard page
main menu
and each main menu has some sub menus
like this image
when i click multiple main menu and sub menu type sense generate query like this to get results in api call
filter_by: "cryptoScoreCoarse:=[Unacceptable,Caution] && cryptoScore:=[Broken]"
now i want to make it use OR operator instead of &&,but i dont how can i do this? any idea or suggestion? thanks in advance,here is the screen shot of network tab when api call made
network tab sceenshot
You want to use the operator prop for the RefinementList widget to change the OR to an AND as described here.
<RefinementList
// ...
operator="and"
/>

Angular - pagination without user input

Apologies, the title is horrifically worded.
Background
I have an angular app which I am using as a static display. There is no user interaction so most is based on timeouts. Page is loaded, after X amount of time based on X elements, the page reloads.
Issue
I want to show/hide only portions at at time. For example, one hundred results and I show 10, wait ten seconds, then show the next ten. Again, no user input though.
I am having trouble sorting the elements and hiding/displaying. From my understanding, I believe it is best to use a filter for this similar to pagination with buttons but then how do I trigger that automatically?
I use a JavaScript function to handle fade outs and window reset but I am lost.
I need something like..
<div ng-repeat="item in filtered = items | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"> -->
Solution
The limitTo and startFrom directives worked perfectly, in my controller I setup a $interval using the angular service and iterated "pages"..
startFrom:currentFlowerPage*flowerPageSize | limitTo: flowerPageSize
If you upgrade to AngularJS v1.4.0 or higher, you can use the limitTo filter to get the behavior you want.
<li class="visible" ng-repeat="x in items | limitTo:entryLimit:entryLimit*currentPage">
you can manipulate entryLimit and currentPage with$timeout as you please to play around with the page number and page size.
AngularJS v1.4.0 limitTo filter doc

Using ng-repeat $last as a conditional in a function?

Thankyou for taking the time to view my question.
I'm debugging a web-based application which uses tabs so the user can view data. When a tab is clicked on the current tab ID is used a parameter to loadCurrentTabData.
The tabs are loaded using ng-repeat, with the $last tab always given a class of active.
The issue I'm encountering is when the last tab is closed the second-to-last tab becomes the $1ast tab and is given the class of active, displaying the data to the user but without passing the correct ID to the loadCurrentTabData function.
The ng-repeat is as follows:
<tab ng-repeat="tab in userTabs" ng-click="loadCurrentTabData($ID)" class="tab{{tab.ID}}" active="$last">
I can easily think of the logic for how to overcome this, but I need to be able to reference the $last tab in the ng-repeat tab list. The logic would be something like this: (ng-click on the 'close tab' button would call this function)
if($last){
loadCurrentTabData($ID-1); //Load the second-to-last tab.
} else {
loadCurrentTabData($ID+1); //Load the next tab.
}
Any help or advice would be greatly appreciated, please let me know if anything is clear.
Thanks!

Make a link do 2 actions

Before anything, I don't know if I'm taking the right approach to this so bear with me on this.
My problem is as follows: I'm trying to use an accordion where each tab is a category and when expanded, the accordion shows the artists in that category. So far, so good.
Now, the other part of what I'm trying to achieve is this: Once I click on the tab (which has a "#" link) I need to display the artists list in a div, which I was planning to do with AJAX. I can do this without problems if the link was INSIDE the accordion contents (for example, if I wanted to click on an artist) but can't figure out how to make it work when clicking a tab.
My code is as follows:
<li class="artistlist">
Photo
<ul>
<li>Artist</li>
<li>Artist</li>
<li>Artist</li>
</ul>
</li>
</ul>
<div id="contentbox">
<div id="artistcat">
</div>
</div><!-- /contentbox -->
and what I'm trying to do is the following: replace href=# with something like this:
Abstrakt
thus, when clicking on a category (for example "photo") it expands the accordion (which it does) AND shows the content in the ajax box, which is exactly the same content of the accordion only with thumbnails.
So basically, I need to make that tab link do 2 actions: 1) expand the accordion and 2) show the ajax content.
I'm thinking that perhaps the AJAX solution is the wrong way, either way, any help will be greatly appreciated.
Try to use jQuery, and make a little piece of code that does what you need to.
Like
$('#contentbox').click( function() {
$('#content').ajax( /* do ajax stuff */ );
// animate accordion
});
If you can, use jQuery or some other library.
Use observers to trap click events. This way you seperate your html from your javascript.
use to do the ajax requests => you can do multiple things "on succeed" and
throw clean errors when the ajax requests fail.
your library will also give you the tools to trigger multiple observers "onClick"

What's the best way to use a YUI TabView in an ASP.NET MVC app?

I'm creating an ASP.NET MVC web app and would like to use the YUI TabView (because I generally like its default look and I'm using a couple other YUI things, so the additional overhead will be comparatively small) to render a set of tabs in the master page. Here's what I want:
Each tab should render the result of a particular controller action.
Each of these controller actions will render some HTML and associated javascript.
Eventually there will be some application state to manage, but I am ignoring that at the moment just to look at the tabbed view.
What's the best way to do this?
The YUI TabView examples suggest that each tab's content is in its own div.
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><em>Tab One Label</em></li>
<li class="selected"><em>Tab Two Label</em></li>
<li><em>Tab Three Label</em></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
I don't want to do this, since I don't want to load all the content for all the tabs all at once. I'd think I'd like to catch events that let me see the tab that is being activated and then redirect to the appropriate action. It looks like the tabs' "dataSrc" attribute could help me, so I built up a test based on their dynamic example:
tabView.addTab( new YAHOO.widget.Tab({
label: 'One',
dataSrc: '/Home/Action1',
cacheData: true,
active: true
}));
tabView.addTab( new YAHOO.widget.Tab({
label: 'Two',
dataSrc: '/Home/Action2',
cacheData: true
}));
tabView.appendTo('container');
This seems to work well enough in getting to the actions, but one artifact of this is that any javascript that is emitted by my action doesn't seem to get evaluated properly... i.e., this type of thing doesn't show my alert box:
public ActionResult Action2()
{
return Content("<script type='text/javascript'>alert('test');</script>");
}
My concrete questions are:
Should I abandon YUI's TabView because it's just not the best choice for this?
Should I just catch the TabView's onBeforeTabChange event and just redirect to a view that then re-renders the master page (and thus the TabView), basically un-ajaxing the TabView?
Is there a way I can use YUI's TabView and retain the ajax behavior while getting my actions' script code to properly run?
Your content is going to be placed into the page at the appropriate place. The time for its execution is long passed. You need something like jQuery's call back function that will run a script of your choosing after the AJAX action completes. For your alert to pop, you'd have to send it with the original page request.

Categories

Resources