if else if else in angular js - ruby-on-rails
I have to incorporate angular in my slim file, I'm not sure how to transform if else block in angular. I know angular don't have ng if else statements but is there a way to change below code to angular
- if #cart['empty']
cart is empty
- elsif #cart['invalid']
can't proceed
- else
-#cart['Items'].each do |item|
#{item['description']}
I want to achieve some thing like this
ng-if="cart.empty"
cart is empty
ng-else-if cart.invalid
can't proceed
ng-else
ng-repeat="cart.Items as item"
item.description
What you're looking for is the ng-switch directive.
First get some variable that will contain the switch condition:
$scope.getStatus = function(cart) {
if (cart.empty) return 'empty';
if (cart.invalid) return 'invalid';
}
And then use the directive:
<div ng-switch = "getStatus(cart)">
<div ng-switch-when = "empty">Cart is empty</div>
<div ng-switch-when = "invalid">Can't proceed</div>
<div ng-switch-default>.... ok ....</div>
</div>
Related
Rails: Inspect an array in template engine
I am maintaining a 5.2 rails app and I came across the two lines below in the template:
<%
clazzes = Clazz.joins(:staffs).includes(clazz_students: :student).where(staffs: { id: #staff.id })
all_students = clazzes.flat_map { |clazz| clazz.clazz_students.map(&:student) }
%>
I have like to somehow inspect all_students to see what is in the array. Something like console log. Any suggestions on how I can do that?
You could use the debug view helper. Note that you have to change to output mode by changing <% to <%=.
<%=
clazzes = Clazz.joins(:staffs).includes(clazz_students: :student).where(staffs: { id: #staff.id })
all_students = clazzes.flat_map { |clazz| clazz.clazz_students.map(&:student) }
debug(all_students)
%>
Sidenote: Loading and transforming data is usually done in the controller or even in the model when possible. And I would argue that those lines in a view are a code smell and make the view much harder to maintain and potentially to reuse. I suggest moving those lines into the controller method and just calling the instance variables in the view like this:
# in the controller method:
#clazzes = Clazz.joins(:staffs).includes(clazz_students: :student).where(staffs: { id: #staff.id })
#all_students = clazzes.flat_map { |clazz| clazz.clazz_students.map(&:student) }
# in the view
<%= debug(#all_students) %>
how to conditionally add a div in slim
I have a small html fragment and want to write a conditional such that the first two loading results are wrapped in a div called "loading-top-two" but not sure how to do it. Was thinking something like this but (obviously) doesn't work. How would I do this? On RoR, if there's any magic to be had there. .loader-results - (0..2).each do |i| - if i==0 .loading-top-two = render "lawyers/search/loading_result", idx: i - else = render "lawyers/search/loading_result", idx: i
If I understand correctly you can just do this, first render the first two and then the rest of the result. [2...] means everything from the item with index = 2 until the end (infinity) .loading-top-two - #result[0..2].each_with_index do |result, index| = render "lawyers/search/loading_result", idx: index - #result[2...].each_with_index do |result, index| = render "lawyers/search/loading_result", idx: index
How to scrape a span name in Nokogiri in Ruby?
I want to scrape data off a website. The data is in the text of a span.
The HTML looks like this:
<p class="text-muted text-small">
<span class="text-muted">Votes:</span>
<span name="nv" data-value="1564808">1,564,808</span>
<span class="ghost">|</span>
<span class="text-muted">Gross:</span>
<span name="nv" data-value="107,928,762">$107.93M</span>
</p>
I want to search the whole page and get the value of the data-value which is 1,564,808 not the 107.93M value.
I tried various ways to get the data, Like for instance:
#votes = []
html_content =
open("https://www.imdb.com/list/ls057823854/sort=list_order,asc&st_
dt=&mod e=detail&page=1").read
doc = Nokogiri::HTML(html_content)
doc.css(".text-muted['span name=nv']").each do |i|
#votes << i.text.strip
Try this code:
doc.css('div.lister-item-content > p.text-muted > span[name = nv]:nth-child(2)').map(&:text)
Which results in:
["1,564,941", "373,745", "2,004,624", "1,077,404", "887,189", "305,554", "207,904", "1,074,609", "748,393", "789,255", "1,224,753", "754,008", "634,752", "1,056,328", "1,604,158", "1,438,194", "629,504", "1,158,452", "517,609", "539,263", "1,443,979", "1,290,159", "161,981", "830,992", "1,427,193", "299,532", "289,184", "705,138", "615,264", "1,147,650", "1,030,826", "1,018,932", "921,730", "524,568", "557,482", "1,973,773", "813,743", "367,587", "342,800", "188,210", "649,467", "1,068,455", "547,990", "527,123", "805,964", "420,447", "441,780", "318,295", "1,004,742", "446,096", "203,977", "581,108", "1,754,019", "616,804", "484,534", "265,048", "958,244", "289,190", "651,605", "503,185", "320,564", "660,685", "476,016", "432,155", "588,572", "374,705", "378,561", "337,801", "463,467", "508,822", "187,810", "1,128,184", "221,361", "261,529", "322,314", "324,435", "116,258", "318,628", "1,334,595", "222,651", "1,155,754", "228,713", "205,956", "271,162", "293,774", "33,136", "80,385", "703,048", "195,712", "274,244", "233,133", "121,874", "208,462", "513,797", "485,112", "120,750", "135,232", "57,411", "125,431", "297,193"]
Indentation oops with "if condition then <a> else <span>" in slim
I have to render either an or a depending on a condition, however, slim's indentation and "no explicit end allowed" gets in the way. In this simplified code, I'd like to wrap a product with three DIVs in either an A or a SPAN depending on whether the product is available or not. - if available? a href=... - else span class="unavailable" .currency = #product.currency .price = #product.price .description = #product.description The above obviously won't work since the product is not rendered within the A or SPAN but next to it. - if available? a href=... - else span class="unavailable" .currency = #product.currency .price = #product.price .description = #product.description This case is even worse, because slim treats the product as part of the "else" case and renders the product next to the SPAN and not at all for the A. - if available? a href=... - else span class="unavailable" .currency = #product.currency .price = #product.price .description = #product.description Here everything is fine for the SPAN but the A remains empty because the product is treated as part of the "else" case. - if available? a href=... - else span class="unavailable" - end .currency = #product.currency .price = #product.price .description = #product.description Now, this could be correct, but slim doesn't allow explicit "end" and therefore raises an exception. Any idea how I can get this to work? PS: Maybe slim should allow explicit "end" for edge cases like this one.
This is what I could come up with as a workaround: Using capturing to local variables you save your children in a local variable: = capture_to_local children=:children .currency = #product.currency .price = #product.price .description = #product.description And now you can run - if available? a href=... = children - else span class="unavailable" = children I don't have slim set up, just tried it with haml, but it should work just the same :)
How to increment local variable inside Razor Syntax, MVC3
I am working on MVC3, i have a situation where i want to do something like this: <Div> #Code Dim i = 1 End Code .... some where, i want to increment i's value, expect 'i' value should be incremented by 1 for subsequent use. #i = #i + 1 .. </div> but razor is throwing wrong syntax error message. Could someone help me how to do this properly in side razor code. Thank you, Rey.
I don't know VB, but in C# u can use
#{i = i + 1;}
or
#{ i++; /* or i += 1; */ }
UPDATE:
I think in VB must be:
#Code
i = i + 1
End Code
test it!
UPDATE:
I create a MVC3 app with VB and test this code:
#Code
ViewData("Title") = "Index"
Dim i = 0
End Code
<h1>#i</h1>
<h2>Index</h2>
#Code
i = i + 1
End Code
<h1>#i</h1>
It works! post your markup, if u can.