I have a JSON object (tbls) which contains an array called sections. This array contains titles (n) and IDs (viewid) of "rooms" that are also a part of the JSON object. This means you can do tbls.[roomid] and get the array that contains the objects of each room. I have a hard time making this work in Angular.
It was built this way because it makes it easy to work with when it comes to UITableViews in iOS (where it's implemented and works). Therefore I cannot change the data. I tried below solution, but that gives me an error. Is there an effective way to do this in Angular?
<tbody data-ng-repeat="section in tbls.sections">
<tr>
<td>{{::section.n}}</td>
</tr>
<tr data-ng-repeat="table in tbls.{{section.viewid}}">
<td>{{::table.n}}</td>
</tr>
</tbody>
JSON JSFiddle: https://jsfiddle.net/Lu2ocqku/
Edit: removed tableObj as it's not relevant to the question and doesn't match data example exactly. Same logical problem though.
Edit: Since I asked this question I have changed it to be properly nested with an array of sections containing what is in that section as well. Don't do what I did in this question, originally.
You just need to use standard [] javascript object syntax:
<tr data-ng-repeat="table in tbls[section.viewid]">
Related
I'm forcing the problem that I have to set up a visualforce page rendered as pdf, which outputs a automatically generated invoice. Because of intern workflows this page has to be set up to the Opportunity object.
Most of the fields used are taken from the Opportunity object itself and work fine.
But I also need access to the OpportunityLineItem fields to display the products on the invoice.
How can this be realized? Do I have to write a controller extension in apex or is it possible without?
As an alternative, would this eventually be possible with cross formula fields referring from Opportunity to OpportunityLineItem? I tried this, but could not find any possibility to select OpportunityLineItem in a formula field in the Opportunity object.
Any help is much appreciated. Thanks!!
Below is a sample page accessing the OpportunityLineItems for a given Opportunity using the standard controller ammended from this doc reference.
<apex:page standardController="Opportunity">
<table border="0" >
<tr>
<th>Description</th><th>Quantity</th>
<th>Unit Price</th><th>Name</th>
</tr>
<apex:repeat var="oli" value="{!Opportunity.OpportunityLineItems}">
<tr>
<td>{!oli.Description}</td>
<td>{!oli.quantity}</td>
<td>{!oli.unitprice}</td>
<td>{!oli.Name}</td>
</tr>
</apex:repeat>
</table>
</apex:page>
With respect to formula fields, you cannot access child fields in a formula on the parent for the simple reason that it is a one to many relationship. The parent Opportunity would not know which of the children to lookup to.
The best you can do is make a regular (text or whatever) field, run a Process Builder triggered by a change to the relevant field(s) on the parent (opportunity) and trigger a Flow to loop over the children (LineItems) and make the changes to the parent based on some condition you specify.
I am using bootstrap to display and sort a table. I was wondering how/if I could implement a temporary arrow(or something) in each header in the table to indicate which direction it is being sorted.
Yes this is possible. For the header, add the following...
<table>
<thead>
<tr>
<th>Column 1 <span class="glyphicon glyphicon-sort"></th>
...
</tr>
</thead>
</table>
EDIT: I assume you actually want the icon to sort the table, as well.
This is dynamic behavior, so you won't be able to do this in pure HTML/CSS: you will need to use JavaScript. Here are the general steps that you would do to make this happen:
Store all of the table rows inside of a JavaScript variable
Inside the <th>, place another element, like a <span> or <img> that contains your arrow image.
Attach a click handler to the arrow, that sorts the array of table rows
After the array is sorted, use DOM API functions to remove the old table, create a new table, and then insert a new table in its place. Bootstrap usually is used with jQuery, so you can look at some jQuery functions to remove the table, build a new one (by going through the rows), and then render the built table to the page, in place of the old one.
There are a variety of libraries that do this, but you can accomplish it more simply by doing it yourself.
I need help creating a dynamic table in the format of a round robin competition using HTML and AngularJS. An array of strings will be given and then the table will be created based on how many names were in the list so part of the table will be generated dynamically and part of the table will always be the same. This is an example of a table that would be generated if I passed an array with 8 names. Only columns A, B, and C should have any information when the table is generated though I kept everything blank for simplicity's sake. The rest of the boxes should all be text input fields.
Until now most of the tables I have done have been pretty simple and I am a little out of my depth here, any help would be much appreciated.
Assuming you always have a full 8 teams this would get you started
<table>
<tr>
<th>club</th>
<th>team</th>
<th>#</th>
<th ng-repeat="item in items">{{$index+1}}</th>
<th>V</th>
<th>TS</th>
</tr>
<tr ng-repeat="item in items">
<td>{{item.club}}</td>
<td>{{item.team}}</td>
<td>{{item.rank}}</td>
<td ng-repeat="item in items" ng-class="{black:$index==$parent.$index}"></td>
<td><input ng-model="item.v"></td>
<td><input ng-model="item.ts"></td>
</tr>
</table>
DEMO
This is a really nice example of using nested ng-repeat elements.
Please see this plunker for a working demo.
The main trick for detecting when to black out a box is to use ng-init="$rowIndex=$index" on the outer ng-repeat (where we generate a row for each entry). This allows the inner ng-repeat (where we generate a column for each entry) to have an ng-class="{'blackout': $index==$rowIndex}"
I am completely stumped on this one. Everything's working fine (or fine enough for now) and all I need is to get the data back out of the factory in a non-json format. I've got a semi-working plunker with all the details.
Basically, the first page (under the Ctrl controller) is where a user can check a bunch of boxes. There's also an ng-switch between sets of options (the real things are much, much larger lists than these), so the checkboxFactory maintains the user's choices. When the user goes to the next page (or "next page" in the plunker because faking it), they can see what they chose. Those choices will then get wrapped up in a json post back to the server. I need to show the user-friendly name, but also have the id# of the choice, for the server.
If I put value="{{item.name}}" in the original checkbox ng-repeat, everything is fine. Except for the fact that then I have a factory of names, and not the server-required ids. Doing a second array in the factory (one for selected names, one for the corresponding selected ids) seems like overkill, when theoretically I could just add each selection as an object, and extract the properties as needed on the second page.
In reality, it's not working. Here's what I get if I echo the factory, after selections are made:
[ "{\"id\":1,\"name\":\"Firstplace\"}", "{\"id\":2,\"name\":\"Second place\"}" ]
...and I'm not sure, but those backslashes seem to be turning every selection into strings, because there are quotes just inside the square brackets. I've tried editing line 54 in the script, but I get errors. It doesn't like this:
if (checked && index == -1) {
if (setup) elem.prop('checked', false);
else scope.list.push({
id:"scope.value.id",
name:"scope.value.name"
});
On the html side, it doesn't like any of the variations I've tried in the ng-repeat, either. It seems like the source of all nightmares is that pushing is creating deformed json. I've tried all of these the second page/output:
{{item}}
{{item.name}}
{{item.item.name}}
The only one that works is {{item}} and unsurprisingly it's pretty ugly. Has anyone run into this before, and have any hints on how to fix this? Many thanks in advance.
using # will turn your object into a string, you should just use a reference to your item object instead and use =.
Change {{item}} to just item as a reference:
<input type="checkbox" name="group1" value="item" ng-model="isChecked" checkbox-list='checkedCity' />
In directive use =:
scope: {
list: '=checkboxList',
value: '='
},
see updated plunker
i'm trying to make a question game with 30 question divided into 3 dificulties, so i'm using arrays to have my questions randomized but not repetitive.
I made the code use the first parameter of the array (array[0]) then remove it from the array.
So, my array will have no more elements after a time. But, when my array have only 1 element, i cant play this element, and i need to use the representation of the empty array to get it to play.
I'm new on AS3, so this may seem very confusing. Here is the code I used.
btn_1.addEventListener(MouseEvent.CLICK,retor);
function retor(e:MouseEvent):void{
trace(vaitemp);
gotoAndStop(1,vaitemp[0]);
vaitemp.splice(0,1);
if(vaitemp.length==0){
trace ("acabou")
gotoAndStop(1,vai2temp[0]);
vai2temp.splice(0,1);
trace(vai2temp)
}
}
I need to represent the "vaitemp" Array as an empty array at the "if"function, so it will play the last element and THEN go to the next array (the "medium dificulty group").
Well, the question is preety messy, i hope any of you can understand what I want.
The literal for an empty array is just []. As in var emptyArray:Array = [];