I am working on a Rails 3.2.11 app using angular 1.0.5.
Currently, a user will select a Cycle from a dropdown, and that will return a bunch of JSON from my controller using ng-resource.
Here is the method
$scope.update = function(cycleId) {
Cycle.get({action: cycleId}, function(resource) {
$scope.selectedCycle = resource;
$scope.tasks = resource.tasks;
$scope.newTask = {cycle_id: resource.cycle.id};
});
};
Here is an example of what json my controller is returning, which is 'resource' in above function: https://gist.github.com/anonymous/01ffe5a37e370661f6fb
Basically I am needing to use ng-repeat twice (one of them nested) using angulars ng-repeat, so that I can get the task_type_name in there as a header. I'm getting some weird interesting results. See the shorted code in my view below and the full thing here
<section ng-repeat="(task_type_name,task_type) in tasks ">
<h2>{{task_type_name}}</h2>
<table>
<tr>
<th>Task Name</th>
</tr>
<section id="task-edit">
<tr ng-repeat="task in task_type">
<td>
<%= link_to "{{task.name}}", '', "ng-click"=>"toggleShowHistory(task.id)" %>
</td>
</tr>
</section
</table>
So my is occuring at this part here
<section id="task-edit">
<tr ng-repeat="task in task_type">
If I try to combine that section and tr, OR change tr to ANYTHING but a tr, {{task}} no longer becomes available.
<section class="task-edit" ng-repeat="task in task_type">
{{task}} is available right here
<tr>
{{task}} is not available right here
<td>
{{task}} is not avaiable right here
</td>
</tr>
</section>
I tested the same concept on the first loop, and it seems to be fine on that loop just not the second, nested loop.
I'm assuming it has something to do with the scope. But i'm just not getting it.
Also, if you have any tips, i'm very new to angular and would love them.
I created a demo, and I am not seeing any issue. Please check your data source and make sure you plug in the tasks value of the json.
You need to change the nested section to tbody.
Demo on jsfiddle
Related
Please help, i cann't find in freemarker guide how to convert from thymeleaf this:
lists.isEmpty and for each
<th:block th:if="${#lists.isEmpty(employees)}">
<h3>No employee</h3>
</th:block>
<th:block th:unless="${#lists.isEmpty(employees)}">
<tr th:each="contact,iterStat : ${employees}">
<td th:text="${iterStat.count}"></td>
<td th:text="${contact.name}"></td>
<td th:text="${contact.phone}"></td>
Thanks!
Maybe Something like this? (sketch, not tested)
<#list employees as contact>
<tr>
<td>${contact?index}
<td>${contat.name}</td>
<td>${contact.phone}</td>
</tr>
<#else>
<h3>No employee</h3>
</#list>
Notes
<#list> Will generate a <tr> element for each item in the employees sequence, containing <td>'s for each field.
If the employees sequence is empty it will generate the <h3> element.
See List Directive Doc
It gets the zero based index of the item using the build-in function
?index. See built-ins and loop variables in the help. Freemarker built-ins Doc. If you want one based, you can add one to it.
It's works
<#list employees as contact>
<tr>
<td>${contact?index}
<td>${contat.name}</td>
<td>${contact.phone}</td>
</tr>
<#else>
<h3>No employee</h3>
</#list>
I have my grails view, and using a api rest I Receive an array of items,that I put in a table,and I want to make the pair rows with tr class="alt">
I want for first for second ,and so on.
I was thinking to do that with a or creating a tag,but don´t know really if there is something useful that can use for similar cases.
The tr that I want to change In the code is as
<table id="customers">
<tr>
<th>Foto</th>
<th>Nombre</th>
<th>Vendedor</th>
<th>Precio</th>
<th>Estado</th>
<th>Ciudad</th>
</tr>
<g:each in="${results}">
**<tr >**
<td><img src="${it.thumbnail}"></td>
<td>${it.title}</td>
<td>${it.nombre_vendedor}</td>
<td>${it.price}</td>
<td>${it.condition}</td>
<td>${it.address.state_name}</td>
</tr>
</g:each>
</table>
<g:each in="${results}" status="ix">
<tr class="${ix % 2 ? 'light' : 'dark'}">
<td>...
</tr>
</g:each>
With the help of firePath, I got this:
.//*[#id='#table-row-51535240d7037e70b9000062']/td[1]
Parot of My HTML looks like this:
<table class="table table-bordered table-striped">
<tbody>
<tr>
<tr>
<tr id="#table-row-51535240d7037e70b9000062"> #this is the id that i want to get
<td> 54 </td> #this is the td that i know
<td>
<td>
<td>Open</td>
<td/>
What i really want to do here is, by giving the td value (54), I want to be able to get the id (parse the id), any hints how can i achieve that?
Thanks in advance.
PS: sorry for my English, and for my lack of knowledge :)
First of all your HTML is invalid (because it contains nested <tr> nodes). Nokogiri may be able to parse it, but if you can you should fix it before that.
You can fetch that id by the following ruby code:
doc.at_xpath("//td[contains(text(), '54')]/..")['id']
//td[contains(text(), '54')] will grab all the <td> nodes which contain 54, /.. will go to their parents.
Document#at_xpath will fetch only the first matching item
['id'] will get the attribute of the matching node.
Using jquery
$(function(){
// (i dont know if you have id for that td or not, it will be more easy if u do have id for that td)
console.log($('table tbody tr td:first').closest('tr').attr('id')); // you can remove :first if you want to.
});
Oops, I misread your question, and one more thing, there is a problem in your tr tag.
I have the following table structure inside a view which gets displayed in the _Layout view in place of #RenderBody
<table>
<thead>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
</tr>
</tbody>
</table>
In my _Layout page, I want to apply the contextMenu event to the th elements, however, being a beginner, I'm having a hard time figuring the selector for the same.
Some combinations that I've tried -
I have a reference to my table in a variable called oTable
oTable.$('tr th').contextMenu ....
oTable.$('thead tr th').contextMenu ....
$('table.tableID th').contextMenu ....
None of them are working. Any suggestions?
If you simply want to select ALL of your th elements then you don't need anything more complicated than this:
$('th').contextMenu ....
If your table has an id associated to it then the following will allow you to target just that table:
$('#yourid th')
Full context: I'm trying to process multiple files using a grails Application. The code I will display comes from the post-processing page where it gives information about the files processed.
My initial sense was to use code like this:
<table>
<tr>
<th>Parsed from Excel:</th>
<th>Uploaded to DS:</th>
<th>File Name:</th>
<th>Size:</th>
</tr>
<tr>
<g:each in="${fileContents}" var="item">
<td>${item}</td>
</g:each>
<%--
<td>${fileContents.ExcelRows?.encodeAsHTML()}</td>
<td>${fileContents.policies?.encodeAsHTML()}</td>
<td>${fileContents.originalFileName?.encodeAsHTML()}</td>
<td>${fileContents.Size?.encodeAsHTML()}</td>
--%>
</tr>
</table>
Now, what I don't understand is why the contents displayed in the <g:each loop always reports key=value such as ExcelRows=14 as I have received in one output case.
When I switch comments (note the <%-- tag being used) it works exactly as expected. From my "ExcelRows" column, I get just "14." What is wrong with my thinking that the <g:each loop should do the same thing? Intuitively it comes down to For each item in fileContents
display item.
My controller code:
def processFile = {
def uploadedFile = request.getFile('excelFile')
//...snipped
def fileContents = [
ExcelRows:"${ods.numberOfRows}",
policies:"${ods.numberOfPolicies}",
originalFileName: "${ods.originalFilename}",
Size:"${ods.size}"
]
[fileContents:fileContents]
}
When iterating over a map you'll be working with Entrys. Try using:
<g:each in="${fileContents}" var="item">
<td>${item.value?.encodeAsHTML()}</td>
</g:each>
Or
<g:each in="${fileContents.values()}" var="item">
<td>${item?.encodeAsHTML()}</td>
</g:each>