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.
Related
In my Vue template, I'm currently setting response data to an object called dateEvents which is structured like this:
<tbody v-for="dateEvent in dateEvents">
<tr>
<td>{{ dateEvent.id }}</td>
<td>{{ dateEvent.status }}</td>
<td><button v-on:click="changeStatus" type="button" class=" taskButton btn-default"><a style="color:white;">Accept</a></button></td>
</tr>
</tbody>
My data shows properly, and I'm calling a method/function with button click, and I can get the click to fire an event but not getting the value properly. I want to have access to the id and status of the clicked row's button within the method but can't figure out how to get it. dateEvent is being set in another function in my vue code so using this.dateEvents gets the base object but I need the specific data sent from the row that is clicked. Here's the vue code:
//vue code
methods: {
changeStatus: function(event) {
alert(this.dateEvents.status)
},
You can pass arguments to the method. In the template:
<button #click="changeStatus(dateEvent)">
And in your method:
changeStatus: function(dateEvent) {
console.log(dateEvent.status, dateEvent.id);
},
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>
I'm creating HTML code inside javascript code, the problem is it doesn't recognize that it's an Angularjs code, how can I do that please ?
my problem is that the variables in {{}} are not recognized as Angularjs code and are put like that when I call the function from the view, even though on top of the view I have the declaration of ng-app and ng-controller on tope of the view.
Any help please ?
You have to inject ng-sanitize into your app and then include the ng-bind-html directive in your html in the elements you're generating from your controller.
So where you create your app module do something like:
angular.module('myApp',[ngSanitize])
That being said, you're doing it wrong. :)
Define the table in your html and use ng-repeat to generate the rows. I'm guessing there's something else to this, but it looks like you're trying to generate a table dynamically after some event occurs. Just put the table in your html and use ng-if to hide it until the event occurs.
Or do it in a component.
Your component html would basically just be your table layout like you're generating in the factory code stored in tableauComponent.html.
<table>
<tr>
<th>Matricule</th>
<th>Sexe</th>
<th>Direction</th>
<th>Type_contrat</th>
</tr>
<tr ng-repeat="x in tableau.data">
<td>{{ x.MATRICULE }}</td>
<td>{{ x.SEXE }}</td>
<td>{{ x.DIRECTION }}</td>
<td>{{ x.TYPE_CONTRAT }}</td>
</tr>
</table>
The component would get registered with your app with something like this:
angular.module("myApp").component("tableauComponent", {
templateUrl: 'tableauComponent.html',
controller: tableauController,
controllerAs: 'tableau'
})
function tableauController() {
var ctrl = this;
this.data = service call to get your data here.
}
Then whereever you want this baby to show in your html you just use:
<tableau-component></tableau-component>
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>
In my application results are displaying as a table format.
Part of my code is,
{% for device in devices %}
<tr>
<td>{{ device.operator}}</td>
<td>{{ device.state }}</td>
<td>{{ device.tstampgps }}</td>
<td><button id='rec_delete'>Delete</button></td>
</tr>
{% endfor %}
Even if we press the delete button, I need to delete the particular record from the database. before that I want to prompt a confirmation box for that.
Can anyone help me?
Add a unique record Identifier that you can associate to DB to the button. Once confirmed you send this identifier to server with AJAX and sever code does the DB delete. Also change ID to class on repeating elements since ID's must be unique
HTML
<tr>
<td>{{ device.operator}}</td>
<td>{{ device.state }}</td>
<td>{{ device.tstampgps }}</td>
<td><button class='rec_delete' data-record_id="{{ device.DB_ID }}">Delete</button></td>
</tr>
JS
$('button.rec_delete').click(function(){
/* data() method reads the html5 data attribute from html */
var record_id=$(this).data('record_id');
if( confirm( 'Are you sure') ){
$.post( 'serverPage.php', { id: record_id}, function(){
/* code to run on ajax success*/
$(this).closest('tr').remove();
})
}
})
Server will receive the post key id as you would with any other form element name
Since I don't know Django, this doesn't include the delete part, which I assume you will AJAXify that (do an asynchronous request to delete). I'm also showing the $devices and $deletes variables as local variables here separately, more or less so you can see how you can store references and then work from those references (which I believe is a better practice than reselecting over and over).
Note also the use of:
jQuery(document).ready(function r($){
I'm using jQuery() in the global scope, which in a larger app you should always do to keep from conflicting with other libraries/frameworks which may use $(). This is also a best practice, and you can use $() within that anonymous function (closure). It's best to get used to doing it this way, IMO.
<table>
<thead>
<tr>
<th>Operator</th>
<th>State</th>
<th>T-Stamp GPS</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="device">
<td>Verizon</td>
<td>OK</td>
<td>033830928</td>
<td>
<button type="button" id="d001" class="delete">Delete</button>
</td>
</tr>
...
</tbody>
</table>
NOTE
I made a slight but important change, with reference to the $self, since the AJAX will run the success handler after this is out of scope:
jQuery(document).ready(function r($){
var $devices = $('tr.device'),
$deletes = $devices.find('button.delete');
$deletes.click(function d(){
var $self = $(this).parents('tr.device'),
del = confirm('Delete device?');
if (del) {
// Do $.ajax() request, maybe using the
// clicked button's ID. Or you could put
// the row to delete ID on the TR element.
// And then on success of the AJAX, run:
$self.fadeOut(500, function f(){
$self.remove();
});
}
});
});
http://jsfiddle.net/wMqr8/2
You can add a click event to your JavaScript, and if the user chooses the "ok" button, you can send a request to the view that takes care of removing the record or whatever
Try this:
<button id='rec_delete' onclick="return confirm('Are you sure?')">Delete</button>