Develop Reference

Angular use ng-src in an image tag within ng-repeat

I have used ng-src on img tags many times within ng-repeats with success, but for some reason I can't get this one to work.
I have an API call that returns some data, and for each item in the return, I basically do this:
<div ng-repeat="item in APIreturn">
<img ng-src="{{item.url}}" />
</div>
I have also tried src="{{item.url}}", ng-src="item.url" and so forth. I've verified that the url that is being used is valid, and works fine in src="{{item.url}}" outside of the ng-repeat.
Any ideas why it would be different in the ng-repeat?
Current HTML
<table ng-repeat="user in userInformation">
<tr>
<td>UserName:</td>
<td>{{user.UserName}}</td>
</tr>
<tr>
<td>Address:</td>
<td>{{user.Address}}</td>
</tr>
<tr>
<td>Gender:</td>
<td>{{user.Gender}}</td>
</tr>
<tr>
<td>Image:</td>
<td><img ng-src"user.image" /></td>
</tr>
</table>

You say you don't see the url if you put just <td>{{ user.image }}</td>. This indicate you access not existing property on yout object. Try json filter:
<td>{{ user | json }}</td>
to see more of your object. As I can see, you use capital letters, but user.image is lower cased.
EDIT: here is a working plunkr.
EDIT2: you missing assign sign.

try change to this. i think you forgot put = after ng-src .
<tr>
<td>Image:</td>
<td><img ng-src = "user.image" /></td>
</tr>

See Strict Contextual Escaping service.
Angular unsafes img src attributes so you'll need to trust it in order to make your images available.
Another approach is to use css to render the images:

For table, in ng-repeat, you have to use {{}} this interpolation in order to access the src file.
Try this one:
<td><img ng-src = "{{user.image}}"/></td>
Let me know if any issues.

Angularjs, how to pass a scope variable to js function which changes inside ng-repeat?

I have an ng-repeat loop in my html. The variable involved in the looping is displayed in table rows. I need to allow the user to click on the desired value and have a js function receive the value so it can act on it.
An earlier version of my code that does not attempt to pass the value, just display it, is here and works as expected; showing the various host values from filteredList with link attributes (underlined, in my case)
<tr data-ng-repeat="update in filteredList">
<td> {{update.host}} </td>
<td> {{update.date}} </td>
<td> {{update.num}} </td>
</tr>
My attempt to pass the value of host that the user clicks on to my function "searcher" is here, but it does not work:
<tr data-ng-repeat="update in filteredList">
<td> {{update.host}} </td>
<td> {{update.date}} </td>
<td> {{update.num}} </td>
</tr>
When it is encountered, angularjs complains:
Error: [$parse.syntax] Syntax Error: Token 'update.host' is unexpected, expecting [:] at column 12 of the expression [searcher({{update.host}});] starting at [update.host}});].
Can someone please advise me of a way acceptable to angularjs to pass the clicked host value to my function?
Thanks very much.

As others have mentioned in the comments, this will work for you:
{{update.host}} </td>
Check out the documentation for ng-click, which indicates it accepts an expression (so you don't need the {{binding}} syntax).

This is the right way to do it
<tr data-ng-repeat="update in filteredList">
<td> {{update.host}} </td>
<td> {{update.date}} </td>
<td> {{update.num}} </td>
</tr>

Try:
<td> {{update.host}} </td>
As mentioned, you don't need the curly brackets around variables inside the ng-click. Neither in any angular directive parameter for that matter.

jQuery.after won't accept </tr> to end an element after starting one

I have a table that is generated by some other software, each row contains 50 columns and I'm trying to break the columns by adding a </tr><tr> to the end of a <td> element.
This is the code that is generated on the fly:
<tbody>
<tr>
<td class="col1" scope="col">08/22/2014</td>
<td class="col2" scope="col">Share</td>
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<td class="col5" scope="col">8/23/2014</td>
...etc
<td class="col51" scope="col">End column</td>
If I use this Jquery:
$( ".col4").after('</tr><tr><td> </td>');
It appends but doesn't respect the </tr>....it ignores it and adds the <tr> on, resulting this code.
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<tr>
<td> </td>
</tr>
<td class="col5" scope="col">etc...</td>
Wonder what the best way to get JQUERY to append that <TR> for me? When I modify the code in Firebug, breaking the rows gives me the desired output, just not sure how to get JQUERY to give me the </tr>.

jsFiddle Example
Detach the last 2 cells, append them to tbody and wrap them with tr
$('.col4').nextAll().detach().appendTo('tbody').wrapAll('<tr />')

You cannot insert tags separately using JQuery. For instance, take the following code, which inserts a <p> element into the body:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$("body").append("<p>");
</script>
</body>
</html>
Using the Firefox inspector, this is what the DOM looks like:
Thus, $("...").append("<p>"), $("...").append("</p>"), $("...").append("<p></p>") all modify the DOM in the same way.

You cannot handle incomplete or illegally formatted HTML as DOM elements. You want to gather up the correctly formatted children before that column and stuff them into a new complete <tr>.
If you want to handle HTML as text, you need to turn it into text with html() and paste it together into actual, correctly closed HTML, and then convert it back.

How can I create a text link in a Knockout JavaScript table?

I've got some KnockoutJS code working - it pulls in a list and binds it to a table.
For the table-data which displays the name, I would like that to be an <a href=...>, but not sure how. The name is still displayed. But you can click on it.
Here's my current code:
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: name()"></td>
<td data-bind="text: price()"></td>
<td data-bind="text: endsOn()"></td>
</tr>
</tbody>
nothing too crazy.
I have another property called url which contains the full http://blah URL to direct the users to. Also, I would like a new tab to open up.
Any suggestions?

You have to remove data-bind attribute from td tag and put a with attr binding inside td:
<tbody data-bind="foreach: items">
<tr>
<td><a data-bind="text: name, attr: {href: url}" target="_new"></a></td>
<td data-bind="text: price"></td>
<td data-bind="text: endsOn"></td>
</tr>
</tbody>
P.S. You don't have to put () after property name in data-bind attribute if you don't construct expression.

Select cell in html table generated by foreach

please help me with knockout.js code
I try select element in table by id and change it's css style, but all rows have same id and I can't using function getElementById. How I can do this simple thing ?
<tbody data-bind="foreach: times">
<tr>
<td id=$index() data-bind="click: $root.select.bind($data, $index(), 0)> </td>
....
<td id=$index() data-bind="click: $root.select.bind($data, $index(), 19)> </td>
<tr>
</tbody>

Try to use such code:
<tbody data-bind="foreach: times">
<tr>
<td data-bind="attr: {id: $index()}, click: $root.select.bind($data, $index(), 0)></td>
<tr>
</tbody>
Read more about attr binding here: http://knockoutjs.com/documentation/attr-binding.html

Id's should always be unique. Assign the same class to all elements you're interested in and use a bit of jquery:
document.getElementsByClassName('class_name')
EDIT: Good point. I was originally going to suggest using jquery and then remembered this function. If you are using jquery library, you can also try this:
$('.class_name').each(function(index) {
...do something...
});
EDIT: to answer your question, there are a few ways to do this:
$('.class_name').attr('id', new_id)
or
$('.class_name').addClass('class_name')
depending on what exactly you're trying to do