I am new to angularjs and I am creating a function. And the function has a parameter like this {{sched.an_id}}. But it doesn't work. Here's my code:
$scope.sample = function(val){
alert(val);
};
HTML
<table>
<tr ng-repeat='sched in schedule'>
<td>
<a ng-click="sample({{sched.an_id}})"></a>
</td>
</tr>
</table>
In the html above, it doesnt alert the value of the sample(). I tried to inspect the element and it gives me the exact value sample(23). I tried to remove the {{sched.an_id}} and replace sample(123) it works. What should I do?
This is because you are using {{}} inside ng-click
Try this
<a ng-click="sample(sched.an_id)"></a>
Related
When I just data-bind one of the attributes, they work. But when I combine them with attr, they don't work. Knockout 3.4.2
<table data-bind="foreach: listPlaces">
<tr>
<td>
<button data-bind="attr: {click: $parent.onClick, text: marker.title}"></button>
</td>
</tr>
</table>
marker.title just shows a string, and onClick opens an info window in google maps.
Your binds should be made like so
<table data-bind="foreach: listPlaces">
<tr>
<td>
<button data-bind="click: $parent.onClick, text: marker.title"></button>
</td>
</tr>
</table>
First of all the text binding should NOT be withing the attr tags, as it is an internal bind used by knockout to update the content of your element and it is expected to work like that.
Now for the click handler, the above is the correct way to attach a click handler, maybe you could get away with an attr: { onClick : 'MyFunc'} but i both doubt it and dont recomend it!
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.
I'm trying to get the headers value from the object when I click on its link.
For the example I'm trying to get the value "2014_BUDGET" when I click on the link.
I've tried all sorts of variations.
Tried getting .prop() instead of .attr.
Tried searching .closest('td')
Tried getting the parent attr.
All end with an alert with 'undefined'.
Here is my code
<td headers="2014_BUDGET" class="MYCLASS">1</td>
<td headers="2014_BUDGET" class="MYCLASS">1</td>
In href this points to the global window object.
Use onclick instead.
<td headers="2014_BUDGET" class="MYCLASS"><a href="#"
onclick="alert(this.parentNode.getAttribute('headers')); return false">1</a></td>
$(document).ready(function(){
$("a.anchor").on("click", function(e) {
e.preventDefault();
alert($(this).closest("td").attr("headers"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td headers="2014_BUDGET" class="MYCLASS">1</td>
<td headers="2015_BUDGET" class="MYCLASS">2</td>
</tr>
</table>
Try this;
<td headers="2014_BUDGET" class="MYCLASS">1</td>
It's essentially the same answer as Gurvinder372, however, that answer targets the A tag, rather than the TD tag.
1
Edit
Never mind, he has updated his answer. Ignore this one.
I have one javascript function named 'change2()' which is define in .ascx page's script tag.
I want to call that function from onclick event of img tag (Note : img tag is also on the same page).
It is compulsory to use img tag only for image.
I tried all the below ways, but unfortunately It doesn't work for me.
Test.ascx
<script language="javascript" type="text/javascript">
function change2() {
alert("Hi");
}
</script>
<table>
<tr>
<td class="list">
Most liked
</td>
<td>
<img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server" onclick="change2();" alt="Slider" />
</td>
</tr>
</table>
Second Way :
<table>
<tr>
<td class="list">
Most liked
</td>
<td>
<img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server" alt="Slider" />
</td>
</tr>
</table>
Please give me your suggestions to call javascript function from same page.
As I can see, the img id is imgLkU, so, instead of including the call in the img tag itself, you can subscribe the event "from the outside", i.e. do it like using $.on, (or $.click) like this:
$.on('click','#imgLkU', function() { change2(); });
// or equivalent $.on('click','#imgLkU', change2);
or
$.('#imgLkU').click(function() { change2(); });
// or equivalent $.('#imgLkU').click(change2);
Do it right after defining change2 in the same script tag.
I'd also recommend you doing the change2 definition and the event subscription inside an inmediately invoked function expression to avoid polluting the global javascript namespace.
(function() {
// define and subscribe here
})();
Because your elements all have runat="server", their onclick property is reserved for a backend-code actionlistener which will be executed at postback.
the onClientClick property is reserved to allow you to still attach javascript "listeners" to what is considered the client-side onclick.
keep in mind that returning false from an onClientClick handler will prevent postback from happening if an onclick listener is also hooked up. (onClientclick is executed before initiating the postback)
try this :
<img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server" onclientclick="change2();" alt="Slider" />
The following function can be directly called from document.ready function like
$(function () {
$('#imgLkU').click(function () {
//do what ever you want
})
});
First, take out the runat="server" on your image since you are already using server tags to set the url. If you still want to use runat="server", you can either:
1: change your img into an <asp:Image> tag and use ImageSource instead of src and OnClientClick instead of onclick.
2: set the src attribute in the code behind.
After that, any click method - from your question to all the answers - should work.
If that still does not show the alert, then start taking out code until it does and work your way from there...
I have a HTML structure like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table id ="x">
<tr>
<td class='col1'>
Hello <span class='name'></span> How are u ?
<td>
</tr>
</table>
And here is my jQuery code:
var variable = $('table#x').find(".col1").html().find("span.name").append(' Jack..!').replace('u', 'you');
alert(variable);
Now, I want this output:
<td class='col1'>Hello <span class='name'>Jack..!</span> How are you ?<td>
How can I do that?
You already have a class you can target, 'name'. You can simply add the text to this:
$('.name').text('Jack..!')
https://jsfiddle.net/2j7rxwyj/
Based on my comment, you could use the following:
Updated Example
$('table#x .col1 span.name').append(' Jack..!').parent().text(function () {
return $(this).text().replace('u', 'you');
});
There were a couple issues in your code. For one, you can't chain .append() after the .html() method. In addition, the .replace() method wasn't changing the text. To fix this, you could pass an anonymous function to the .text() method and return the replaced text.