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

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)">

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.

How to get a value from controller.js file to html file in angularjs

I have stored a value in a scope on controller.js.How to get that scope value in html file.
Controller.js
myAppCont.controller('Listvalue',['$scope','$rootScope','$http',
function($scope,$rootScope,$http){
city=$scope.val;
}]);
HTML
<div class="col-md-10" ng-controller="Listvalue">
<table class="table table-bordered table-style" id="statusTable">
<thead>
<tr>
<th>values</th>
</tr>
</thead>
<tbody class="align-center">
<tr>
<td>{{city}}</td>
</tr>
</tbody>
</table>
</div>
You need to have the $scope variable inside the controller, Do it other way
myAppCont.controller('Listvalue',['$scope','$rootScope','$http',
function($scope,$rootScope,$http){
$scope.city=val;
}]);
Then it will be evaluated and shown in the view
<td>{{city}}</td>
Working Sample
Angular have 2 way data binding principle. The data you bind with the model is get reflected in the view.
The models in a respective controllers are accessed with $scope.
Whatever data you want to bind to the view should be through the $scope.
In this case, if you have, already stored data in $scope.val,
Bind that to your view,
<td>{{val}}</td>
This should work!

javascript function wont recognize angular variable passed to it

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()"

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>

Categories