Angular Js curly braces in rails erb - ruby-on-rails

Does anyone know if it is possible to render angular js curly braces type {{ }}
in ERB as parameters.
eg.
<=home_url( {{code.id}}, #code)/>

Taken from the example from here:
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
Also check this tutorial: http://blog.berylliumwork.com/2013/03/best-practice-of-using-angularjs-with.html
where you can see this example:
<div data-ng-init='mailbox.selected = "<%= #current_page %>"'>
<ul class="nav nav-tabs">
<li data-ng-class='{active: (mailbox.selected == "inbox")}'>
<%= link_to mails_inbox_path, 'Inbox' %>
</li>
<li data-ng-class='{active: (mailbox.selected == "outbox")}'>
<%= link_to mails_outbox_path, 'Outbox' %>
</li>
<li data-ng-class='{active: (mailbox.selected == "draft")}'>
<%= link_to mails_draft_path, 'Draft' %>
</li>
</ul>
</div>

Related

How would you use bootstrap tabs while using an all.each do | | function in rails?

I have a list of items in rails that I would like to display in Tabs, what is the best way to achieve this in rails? Below is the code.
<ul class="nav nav-tabs">
<% State.all.each do |state| %>
<div class="btn-group btn-group" role="group">
<%= link_to state.status, tickets_path(state: state.status), :class => "panel-heading" %>
<div class="badge">
<%= state.tickets.count %>
</div>
</div>
<% end %>
Basically it is a list of about 8 categories which once clicked on filters the list based on the category.
Currently it displays with no tab styling. My goal is these bootstrap tabs.
State is the category class and Status is the actual category
You're not building the correct structure for the tabs.
The Bootstrap documentation specifies that you should create a structure that looks like this:
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
The structure that you're creating looks like this:
<ul class="nav nav-tabs">
<div class="btn-group btn-group" role="group">
[state status]
<div class="badge">[ticket count]</div>
</div>
<!-- more for each state -->
</ul>
What you actually want is something like this:
<ul class="nav nav-tabs">
<% State.all.each do |state| %>
<li role="presentation">
<%= link_to tickets_path(state: state.status) do %>
<%= state.status %>
<span class="badge"><%= state.tickets.count %></span>
<% end %>
</li>
<% end %>
</ul>

Add options as tags from a list

I am trying to implement a list that gives suggestions to users as they type in a form field and add that option as a tag once they click/enter on the option. just like in Upwork skills field
I have languages as options and users can select multiple languages.
Right now, I have it implemented as a dropdown with checkboxes.
<div class="button-group">
<label class="form-control" data-toggle="dropdown">Choose Languages<span class="fa fa-angle-down"></span> </label>
<ul class="dropdown-menu">
<li>
<a class="small"><%= f.check_box :language5, {}, 'none', nil %> No Other Language</a>
</li>
<li>
<a class="small"><%= f.check_box :language1, {}, 'arabic', nil %> Arabic </a>
</li>
<li>
<a class="small"><%= f.check_box :language2, {}, 'cantonese', nil %> Cantonese </a>
</li>
<li>
<a class="small"><%= f.check_box :language3, {}, 'french', nil %> French </a>
</li>
<li>
<a class="small"><%= f.check_box :language4, {}, 'spanish', nil %> Spanish </a>
</li>
</ul>
</div>
Would love some guidance in the implementation of the tag-type method. TIA.

Dropdown not triggered when using partial view in Rails

I have the following in my index:
<div class="btn-group wkt-btn-group">
<button type="button" class="btn share dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SHARE
<span class="fa fa-angle-down" style="font-size:16px;"></span>
</button>
<% render partial: 'booksocial', locals: {book: book} %>
</div>
Then in my partial:
<ul class="dropdown-menu wk-social">
<li>
<div class="jssocials-share jssocials-share-email">
Print
<i class="jssocials-share-logo"></i>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-email">
<a href="mailto:?Subject=I Like BIg Books&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://books.com/book/<%= book.book_name %>" class="jssocials-share-link">
<i class="fa fa-at jssocials-share-logo"></i><span class="jssocials-share-label">E-mail</span>
</a>
</div>
</li>
The page is rendering with the dropdown button but it's actually not rendering the dropdown options. Is there something in my code preventing the list from rendering?
Easy answer that I'm surprised no one chimed in with. I'm not actually outputting the partial at the moment.
<%= render partial: 'booksocial', locals: {book: book} %>

Ruby: Changing an array of items into links in an ERB

I have an array of strings that I want to interpolate into links within an erb file.
How would I approach this syntactically?
Currently, I have the following
<% names.each do |name| %>
<b>
<%=name%>
</b>
<%end%>
<% navigation=["home","about us","store","contact","blog"] %>
<%navigation.each do |navitem| %>
<ul>
<li>
<a href= <%=/#{navitem}/%>".html">
<%=navitem%>
</a>
</li>
</ul>
<%end%>
Change
<a href= <%=/#{navitem}/%>".html">
to
<a href="<%= navitem %>.html">

Rails Hiding a div based on Page using IF and ELSE statements

I have a home page where I want to display a div in a certain way that it will require to be in the top of the application view.
Div is classed as "HOME-BANNER"
I am attempting to create an IF ELSE statement to reflect hiding the div if it is not on the home page.
My question is how do I call the current page in order to identify it as the home view's index. Also would I end the code or do I place an else statement to continue the rest of the page?
<html>
<head>
<title>WEBSITE</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<% if current_page == "home#index" %>
<div class="HOME-BANNER">
<% end %>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
WEBSITE
<ul class="nav">
<li><%= link_to "All Jobs", jobs_path %></li>
<li><%= link_to "My Profile", tempers_path %></li>
</ul>
<div class="float-right">
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i></a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> My Profile</li>
<li class="divider"></li>
<li><i class="icon-th-large"></i> Dashboard</li>
<li><i class="icon-th-list"></i> My Posts</li>
<li><i class="icon-th-list"></i> My Searches</li>
<li><i class="icon-stop"></i> <%= link_to ' Sign out', destroy_user_session_path, :method => :delete %></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
</div>
<div class="footer"></div>
</body>
</html>
You want to do this from your controller. Since this is a localized event, use the controller that specifically hosts this View and not your application controller.
def whatever_view_this_is
#home_banner = true
end
Then in your view :
<% if #home_banner %>
<div class="HOME-BANNER">
<% end %>

Resources