We Keep Coding

Nested ng-repeat with dynamic input

I am trying to display a JSON response in a table using ng-repeat. The problem is that not all objects recieved are the same. All of them have a date, short message and long message. There are also ones with an additional value list, differing in length. This list should be diplayed underneath the long message within its own table or list. I use the alert.slice().reverse() because I want the newest entries to be on top. The new objects are inserted using .push({values}).
<tbody class="AlTbody" ng-repeat="alerts in alerts.slice().reverse()" ng-class="className">
<tr class="Altr Aldate">
<td ng-show="{{alerts.Date}}"><b>{{alerts.Date}}:</b>
</td>
</tr>
<tr class="Altr Alshort " ng-click="toggleDetail($index)">
<td>{{alerts.S}}</td>
</tr>
<tr class="Altr " ng-show="activePosition == $index">
<td class="msgL">{{alerts.L}}
<!-- 1) <p ng-show="{{item.List}}"><br><ul><li>Previous values:</li> <li ng-repeat="vals in ValueList">{{vals.value}}</li></ul> </p>-->
<!-- 2) <p ng-show="{{List.txt}}"> <br><ul><li>Previous values:</li> <li ng-repeat="List in alerts.List">{{List.txt}}</li></ul> </p>-->
</td>
</tr>
</tbody>
I already tried two approaches as seen in the code. The first one displayed the list correct however it was displayed underneath every long message instead of only the one it belongs to. I used a new variable.
var l=valList.length;
scope.List=true;
while(l>-1){
scope.ValueList.push({value: valList[l]});
l--;
}
The second approach did not work at all because I could not find an index.
var l=valList.length;
var indexV= jQuery.inArray(currdate,scope.alerts.Date);
while(l>-1){
scope.alerts[indexV].List.push({txt: valList[l]});
l--;
}
edit:
This is the current output. There you can see two objects( date, short message and long message) and both of them have the previous values section. However only the upper object is supposed to diplay the list of previous values.

What you are trying to achieve is entirely possible, my advice is to start at a known point and work from there.
I have put together a jsfiddle to show you how nested ng-repeats will work. try and work from that point. As a side note it looks like your JSON structure is overly complex, if you can simplify that down I would.
https://jsfiddle.net/roscorcoran/wyu7tgxm/
<div ng-app="App" ng-controller="Ctrl1">
<div ng-repeat="alert in alerts">
<a ng-if="alert.Date">{{alert.Date}}</a>
<p ng-repeat="val in alert.L.vals">
<a ng-if="val && val.value">{{val.value}}</a>
</p>
<p ng-repeat="item in alert.List">
<a ng-if="item && item.txt">{{item.txt}}</a>
</p>
</div>
</div>

You can try to add a ng-if statement inside the ng-repeat loop:
<p ng-if="{{values.list}}"><br><ul><li>Previous values:</li> <li ng-repeat="vals in values.list">{{vals.value}}</li></ul> </p>-->

Okay so this works for me now. It still always displays "Previous Values:" but the values only display when they actually belong to the message.
<ul ng-if="alerts.List.vals"><li>Previous values:</li> <li ng-repeat="val in alerts.List.vals" >{{val.value}}</li></ul>
This might not be the best and most elegant solution but it works.
if(valList){
scope.alerts.push({Date:currdate,S:msgSn,L:msgLn, List:{ vals:[{value:valList[0]},{value:valList[2]},{value:valList[4]},{value:valList[6]}] } });
}else{
scope.alerts.push({Date:currdate,S:msgSn,L:msgLn });
}
I only display the even indexes of the value array because the list of values was a string which I split and every uneven entry is "):" which I don't need to display.

AngularJS - Directives with Angular UI Bootstrap

I'm using Angular UI - Bootstrap, specifically the Typeahead directive. http://angular-ui.github.io/bootstrap/#/typeahead
I'm attempting to use the 'typeahead-template-url' to create custom html templates for my suggestion boxes. After trying multiple techniques, unsuccessfully, I discovered that by purposely messing up my quotation marks 'solved' the display issues. I would love to understand why this is breaking and get it working properly.
For example: this works
<table class="> <!--see class quote error -->
<tr>
<td>
<div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
<a>ID{{ match.model.id }} - {{ match.model.text }}</a>
</div>
</td>
</tr>
</table>
This DOESN'T WORK
<table class="">
<tr>
<td>
<div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
<a>ID{{ match.model.id }} - {{ match.model.text }}</a>
</div>
</td>
</tr>
</table>
FIDDLE is here: http://jsfiddle.net/nicktest222/JXtaZ/24/
Additionally, when you select an item in the results list, it returns the entire object. How can I get it to return a specific property in the object?
Any help would be greatly appreciated.
Thanks

I think it is the way you add your template (columnTwo.html) in JSFiddle.
Look at my demo (which is based on yours): http://jsbin.com/aMOrOra/1/edit?html,js,output
As for the typeahead property:
<input type="text" ng-model="monkey" typeahead-template-url="columnTwo.html" typeahead="suggestion as suggestion.text for suggestion in sample_data | filter: $viewValue" />
Here it means that the suggestion object is used as the selected value, but I want to display only the suggestion.text property in the box. But monkey will still be set to the selected suggestion object.
Just so you know, your current filter will look for the query on every properties of the suggestion object, not only text.
EDIT: To filter only the text property, use the filter like this:
filter:{'text':$viewValue}

Knockout - How to bind outer container css from set of checkboxes?

OK, admittedly horrible grammar in the question, but here's the lowdown:
I'm using the following in my site:
Twitter Bootstrap
Knockout
Durandal
I'm trying to add a css class to the outer label surrounding a checkbox (in a list of checkboxes) so it can highlight the selected checkboxes. Essentially the code is this:
<div data-bind="foreach:values">
<label class="checkbox inline btn" data-bind="css: { }">
<input type="checkbox" data-bind="attr: { value: text }, checked: $parent.checkedValues" />
<span data-bind="text: text"></span>
</label>
</div>
So, what I'm trying to do is to add the btn-primary class to the outer label for the checkboxes that are checked. Rather than put the full viewmodel in here, I've created a Fiddle: http://jsfiddle.net/riceboyler/WEPRZ/1/
I recognize that I can use the $data object to get the current item, but I can't figure out how to check and see if the current item ($data.text) is in the checkedValues observableArray. I'm sure it's probably basic Javascript that I'm missing, but is there any way to do this without using a computed value?

You can do this directly in the css binding by inspecting the parent's checkedValues array.
<label
class="checkbox inline btn"
data-bind="css: {'btn-primary': $parent.checkedValues.indexOf(text) > -1}">
See the Fiddle

You can try this predicate :
$parent.checkedValues().indexOf($data.text) >= 0
I created a new version your fiddle.
I hope this helps.

How do I get the content of a <td> using JavaScript?

My HTML
<tr class="g1">
<td id="saveursqte_box[]">
<div class="t">
xxxxxxxxxxxxx
<div class="r">
<div class="a">
</div>
<img src="images/saveurs/saveur_test.jpg" width="125" border=0>
</div>
</div>
</td>
<td class="i">
<input type="text" name="saveursqte[]" alt="2.95" value="" size="3" onBlur="__sumform();">
</td>
</tr>
What I'm trying to do
I want to get the contents of: <td id="saveursqte_box[]"> using javascript.
which is:
<div class="t">
xxxxxxxxxxxxx
<div class="r">
<div class="a">
</div>
<img src="images/saveurs/saveur_test.jpg" width="125" border=0>
</div>
</div>
I tried this javascript:
var saveursqte_box = document.getElementsById('saveursqte_box[]');
and then
htmltotal = htmltotal + saveursqte_box[i].innerHTML;
but javascript doesn't seem to like me :-(

It is document.getElementById no "s".
This document.getElementById('saveursqte_box[]'); returns a single dom element not an array like jQuery.So the code to get the innerHTML would be:
htmltotal += saveursqte_box.innerHTML;

In addition to #scrappedcola's note about there being no 's' in getElementById, you may also be having problems using square brackets in the element id.
I ran your example in Firefox 4 with <td id="saveursqte_box"> and it worked, whereas using <td id="saveursqte_box[]"> I got NULL as the result of getElementById().

Also:
saveursqte_box[i]
i is not defined. Just use saveursqte_box

Thanks to all! I know my Javascript skills are low but by combining your answers together I came with this and it works perfectly :
htmltotal += document.getElementById('saveurmoisqte_box_' + i).innerHTML;
As per your answer, I removed the "s" of getElementById. My bad: I copied getElementsByName and then replaced the Name by Id... This is why there was a "s" there. The kind of mistake that can waste you a week to debug... 
After that, I rename my <td id="extrasqte_box[]"> with <td id="extrasqte_box_0">. I thought you could write ids arrays like you do with names (ex: name="xxxx[]") and then iterate but I was wrong.
With that in place it works perfectly! Not bea-u-tiful but it works.
What I'm actually doing with this is:
I have an order form with many items and when you fill an input (quantity), an hover image of the product appears to its right... and when you move away (onBLur), the form total is updated, AND using the function here above, I get the content of the <td> (including the hover image) and put a summary of the items chosen in the "checkout section". The result is super-clean for the user and user-friendly. The inconvenient is I hope this makes sense to you.

AND/OR Conditions in jQuery

In jQuery space denotes AND condition "," denotes OR condition, Is that right? But I am facing issues in that. Here is my sample html code
<td id="4">
<div id="test1" class="test1"></div>
<div id="test2" class="test2"></div>
</td>
<td id="5">
<div id="test1" class="test1"></div>
<div id="test2" class="test2"></div>
</td>
If I use the following query, it works
jQuery('#4 [id*=test1]')
it selects the correct div. However, if I use this query,
jQuery('#4 #test1')
it doesn't work. Any Idea?

It is not valid to have duplicate ids within the same document.
If you are building this dynamically then try prepending the parent id to the child so it would be like:
<td id="r4">
<div id="r4_test1" class="test1"></div>
<div id="r4_test2" class="test2"></div>
</td>
<td id="r5">
<div id="r5_test1" class="test1"></div>
<div id="r5_test2" class="test2"></div>
</td>
Note, starting an ID with a number is also invalid, so I took the liberty to prepend "r" to your row ids.
I would recommend using the selector:
$('#r5 .test1')

Space isn't strictly an 'and' condition.
In your own example, jQuery('#4 #test1') space means to get children of #4 called #test1 if you see what I mean
The jquery docs for this explain it better than I do!
jQuery('ancestor descendant')
Selects all elements that are descendants of a given ancestor.

Thinking of selectors in terms of "AND" and "OR" probably isn't the most helpful way to go about things. If a space actually meant "AND", then these two statements would be identical:
$('.parent_class .child_class')
$('.child_class .parent_class')
If a selector was a simple "AND", then these statements would select all items that meet both criteria.
In reality, these statements are very different. A space in jQuery and CSS selectors actually shows inheritance. When you have two separate classes, as in my example, you're always saying "select the class that is second in the list, only if it is contained by an element with the first class in the list."
You could say that a comma means "OR", but really it just separates two selecting statements from each other, so that you can select two completely separate items or groups of items.
The jQuery selector syntax borrows from CSS, so this group of tutorials on w3schools.com might be a helpful place to start.

I think you ought to drop the ids off the div tags and just work with classes.
use $('#d5 .test1') or
$('#d5').find('.test1')
I usually use the latter because it's just easier to read when I go back a month later to look at the code.
<td id="d4">
<div class="test1">w</div>
<div class="test2">x</div>
</td>
<td id="d5">
<div class="test1">y</div>
<div class="test2">z</div>
</td>