javascript function wont recognize angular variable passed to it - javascript

I'm trying to pass 3 arguments im gettting using ng-repeat to javascript function but i cant figure out how. i tried to do it this way:
<tbody ng-repeat="(user_id, row) in data">
<tr ng-repeat="(script_id, cron_format) in row ">
<td ng-model="user_name">{{user(user_id)}}</td>
<td ng-model="script_name">{{script(script_id)}}</td>
<td ng-model="cron_format"><span ng-repeat="l in letters(cron_format) track by $index">{{l}}</span><button class="save" onclick="saveCron(user_id,script_id,cron_format)">save</button></td>
</tr>
</tbody>
but it wont work can someone explain why please?

You should use ng-click for angular click events so:-
<td ng-model="cron_format"><span ng-repeat="l in letters(cron_format) track by $index">{{l}}</span><button class="save" ng-click="saveCron(user_id,script_id,cron_format)">save</button></td>
</tr>
will help you out.

The above code is not working because you are using the wrong syntax.
The function for javascript should not be called within the curly braces else it should be called directly. Like you have called another JS function in line 5 of your code as follows:
onclick = "anyFunction()"

Related

Using ng-repeat object value as javascript parameter

I have a code that looks something like this:
<tr ng-repeat="obj in objs">
<td onClick = "someFunction({{obj.val1}})">{{obj.val2}}</td>
<td>{{obj.val3}}</td>
</tr>
The colums properly show val2 and val3, but the onclick method I'm trying to define doesn't work as the code doesn't translate from {{obj.val1}} into the proper value, it stays as is.
How do I properly send {{obj.val1}} onto the onClick event? Can this be done?
Use ng-click instead of onClick and assign the someFunction() function to angular $scope
Yes it can be done.Using ng-click
<tr ng-repeat="obj in objs">
<td ng-click = "someFunction(obj.val1)">{{obj.val2}}</td>
<td>{{obj.val3}}</td>
</tr>
You don't need to bind the values using {{}}, you can simply put them as function parameters.
In angular they already have directive called ng-click The ngClick directive allows you to specify custom behavior when an element is clicked. which used for click event. And You don't need to bind the parameter {{}}
then your code come like
<tr ng-repeat="obj in objs">
<td ng-click = "someFunction(obj.val1)">{{obj.val2}}</td>
<td>{{obj.val3}}</td>
</tr>
Do this :
<td onClick = "someFunction(obj.val1)">{{obj.val2}}</td>

How to pass a template variable to event handler method in Vue js

This code:
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact(1)">
is working well in Vue js.
But this:
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact({{contact.index}})">
Doesn't seem to work well. Resulting in an error. So how can I pass a environmental variable like contact.index into the event method?
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact(contact.index)">
or simply
<tbody v-for="contact in contacts">
<tr #click="selectContact(contact.index)">
v-on directive will evaluate the string as an expression. You don't have to insert extra {{ }}.
Adding to Leo's answer, if you are looking for getting index of v-for loop than you have to do following:
<tbody v-for="(contact, index) in contacts">
<tr v-on:click="selectContact(index)">
Second code resulting error that is related to interpolation
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact({{contact.index}})">
Why this happening ? Because you are using templating part {{}} into v-on:click directive, which VueJS see as normal aka vanilla JS, so it can't accept the templating here {{}} - mustaches.
Previous answers give you correct and working solutions.

AngularJS ng-click inside ng-repeat

I have a ng-click nested inside a ng-repeat, and I am trying to pass a value from the current item in the loop. If I inspect the html generated using Chrome developer tools it looks correct (&ID=1) but when I put a break point in the function it shows &ID={{d.ID}} as the value that gets passed to the function.
Any help is appreciated.
<tr ng-repeat-start="d in data">
</td>
<td>
{{d.OrganizationName}}
</td>
</tr>
Try it:
<tr ng-repeat-start="d in data">
</td>
<td>
<a href="" ng-click="openDialog(false,'http://portal.sharepoint.com/Lists/Organization/DispForm.aspx?IsDlg=1&ID='
+d.ID)"> {{d.OrganizationName}}</a>
</td>
</tr>
I would recommend passing the Id in as an attribute of the openDialog method and building the url string in the controller.
ng-click="openDialog(false,'http://portal.sharepoint.com/Lists/Organization/DispForm.aspx?IsDlg=1', d.ID)"
then build the string in the controller and perform your location change. Easier to debug and un-clutters the view.
you could also store this string in your controller 'http://portal.sharepoint.com/Lists/Organization/DispForm.aspx?IsDlg=1'
ng-click="openDialog(false, d.ID)"
ngClick directive will evaluate an expression. I guess it's not what you want
Try to change ng-click by simple onclick. It will solve your problem:
Change
{{d.OrganizationName}}
for
{{d.OrganizationName}}
With ng-click. you don't need to use {{}} in order to get the variable value. Like in this sample from Angular Docs
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<span>
count: {{count}}
</span>

How pass a angular model as a parameter to a javascript function

How can I pass a parameter from an angular to a javascript function?
If I try to collectDataById({{model.Id}}) I get an error. My model is being updated after the page load for first time. This what I want to have but with {{model.Id}} inside the JS function is having an error.
<tr data-ng-repeat="model in models">
<td class="text-center table-darker">{{model.name}}</td>
<td class="text-center">{{model.Id}}</td>
<td>Get Data</td>
</tr>
ng-click is an Angular directive, so omit the {{}}
<a href="" data-ng-click="collectDataById(model.Id)">

knockout html binding with another binding inside

I'm using knockout to dynamically loading content into parts of the page, using the HTML binding.
the problem is that the html I want to bind has to do call a function onclick and I need the information about the target and the data that knockout easily send.
something like this:
myFunction($parent, $data)
HTML:
<table>
<tbody data-bind="foreach: rows" >
<tr>
<td data-bind="html: rowValue">this will be a link</td>
</tr>
</tbody>
</table>
Later I set the value to be a link with a knockout binding inside:
rowValue("<a href='#' data-bind=click:alert('hello')" + result.Data + "</a>");
Please check the fiddle here to see the full working code.
You can see the difference between the 2 lines I wrote, if I do a javascript onclick it works, but obviously ko is missing a late binding.
I've seen many questions about this but can't find one with a definitive answer.
I want to do this with KO, how can this be accomplished?
with templates maybe?
KO applies bindings when you call ko.applyBindings.
So if you modify the dom after applyBindings has been called. KO won't be aware of the new dom element.
You can use template this way :
<table>
<tbody data-bind="foreach: sitesTable.rows" >
<tr data-bind="foreach: row">
<td data-bind="template: 'myTemplate' "></td>
</tr>
</tbody>
</table>
<br/>
click here
<script id="myTemplate" type="text/html">
click
</script>
edit by Maurizio. Use this fiddle as the other linkseems to be broken:
See fiddle

Categories