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>
Related
I am writing a html in where the html will display a list of records with three fields - id, name and an icon. When the icon will be clicked by user, a method will be called where the id will be passed as parameter and details of that record will be returned. The code snipped I am following is as below -
<tr *ngFor="let userDetail of userDetails">
<td>{{ userDetail.id }}</td>
<td>{{ userDetail.firstname }} {{userDetail.lastname}}</td>
<td><a href="javascript:void(0);" (click) = "showUserDetails()" ><img src="/assets/user_details.png" width="20" height="20" /></a></td>
</tr>
Here I need to pass the userDetail.id when the showUserDetails() function will be created. But still unable to pass the parameter.
What will be best way to pass that parameter?
Thanks in advance.
You have to make sure:
You are passing the value into the method:(click) = "showUserDetails(userDetails.id)"
The method should be declared in the same component otherwise you have to bind e.g. the service it's implented in within a public variable in the components constructor.
I created a simple stackblitz project. that may can help you.
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()"
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 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)">
I'm trying to set the class of a tr using ng-class with the value of ng-repeat. All the examples I see online seem to call a function. Can i just set the ng-class with a value rather than using a function?
None of these work.
<tr ng-class="{{res.resopnse.label}}" ng-repeat="res in responses">
<tr ng-class="res.resopnse.label" ng-repeat="res in responses">
<tr ng-class="{res.resopnse.label}" ng-repeat="res in responses">
If you have no conditional logic, you can just interpolate into class attribute directly:
<tr class="{{res.resopnse.label}}" ng-repeat="res in responses">