create HTML inside javascript Angularjs - javascript

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>

Related

Passing Variable as parameter in onclick method in Angular

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.

Creating a 'view' link in a grid listing that navigates to a detail route such as hero/:id in Angular

In my template I am doing the following:
<tbody>
<tr *ngFor="let h of heroes">
<td>{{ h.id}}</td>
<td>{{ h.name}}</td>
<td>{{ h.description}}</td>
<td>View</td>
</tr>
</tbody>
How can I make it so View is a link that navigates to /heroes/:id? I have this setup in my route config. I verified that it works by going to http://localhost:4200/heroes/1
Am I better off using the (click) event and calling a function such as viewHero(id). If I did this I wouldn't be sure how to pass the id. Also, if it can be done directly inside of the html template within the href tag or routerLink I would like to know how to do that too. My main problem seems to be accessing h.id inside of a string such as href="".
Update: I got the following to work, but still not happy with it:
<td><a (click)="viewHero(h)">View</a></td>
viewHero(hero) {
this.router.navigate(['/heroes', hero.id]);
}
There has to be a way to simply do this inside of the anchor tag directly. I am not getting a pointer finger when hovering the link.
Try this:
<tbody>
<tr *ngFor="let h of heroes">
<td>{{ h.id}}</td>
<td>{{ h.name}}</td>
<td>{{ h.description}}</td>
<td><a routerLink="/heroes/{{h.id}}">View</a></td>
</tr>
</tbody>

Reference the variable in expression for Angularjs ng-repeat

I have a table that I'm populating from a database using ng-repeat to produce objects that will be capable of being dragged and dropped. When I drag and drop an object onto a cell I need a way to find the id that comes from the initial load from the database so that I can update the database with the new position of the object within the table. From my understanding you should be able to reference the variable in the ng-repeat expression to do this? For example:
you could reference the x in: x in names? This is just example code of a table using ng-repeat:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
I have tried to find an answer for this, by trying to just use Javascript to reference elements produced by angular, but that doesn't seem to work as they are not written to the html source (unless I inspect elements, but that doesn't show my id's). I also thought I could just reference this from the scope, but it would appear each instance of x would get its own scope variable. Is there any way to do something like this within angular context or would you need to use something like jquery?

Child scope accessible in parent without 'ng-controller' directive set

I don't understand how this is possible. Please clear this up for me. I am reading about the scope inheritance and, as far as I understood, we cannot access child's scope from the parent, right?
So I have this situation where I created a controller but forgot to set it in the template via ng-controller detective. But it still works. I never noticed it. So is this the expected behaviour or I am just missing something? I din't even know what parts of code to list here.
It is an ordinary controller
angular.module('Basal.tables')
.controller('ListTablesCtrl', function($scope, getTablesS) {
$scope.tables = {};
getTablesS.fetch(function (d){
$scope.tables = d;
});
});
... executed at location change
when('/tables', {
templateUrl: '/views/tables/list-tables.html',
controller: 'ListTablesCtrl'
}).
But there is no mention of the controller in the template.
<div class='frame' id='list-tables'>
<section class='title'> Tables </section>
<table>
<tr ng-repeat='table in tables'>
<td><input type='checkbox'></td>
<td>{{ table.title }}</td>
<td>{{ table.desc }}</td>
</tr>
</table>
</div>
Everything works though. How is it possible to see the tables object here?
There is the top Main Controller set on the html body which means that it operates under this main controller in the template. But then how does it accesses child's scope?
Please explain if I am missing something silly.
Thanks.
Angular looks upwards for a controllers/method.
Meaning if it is not in the current scope, it will look into the parent scope.
But in your case, you have have attached the controller in your route file.
when('/tables', {
templateUrl: '/views/tables/list-tables.html',
controller: 'ListTablesCtrl'
})

Generate delete confirmation box

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>

Categories