I have the following Angular code:
<tr dir-paginate="item in file.messages | orderBy: orderByField: orderByReversed | itemsPerPage: 10: 'fileMessages'" pagination-id="fileMessages">
<td>{{ item.id }}</td>
<td>{{ item.created_at }}</td>
<td><span data-ng-class="['label', 'label-' + item.type]">{{ item.type }}</span></td>
<td>{{ item.message }}</td>
</tr>
Now the item.message contains some html which is coming from back end of the application which is in Laravel. How to render the html in Angular? I have tried ng-bind-html but to no avail. Any solutions or alternate to this approach?
Depending on your version of angular, you can use :
<td [innerHTML]="item.message"></td>
Angular will sanitize your content (remove for example) for security purposes.
Related
I create an Object and use ngFor to loop through it and create a table. I would like to somehow incorporate mailto links if possible.
I have this finalResults object that looks something like this:
[
{key: 'example#example.com', value: 'message'}
]
Where message is something like
"Please contact the Login Team for help."
I would like to make Login Team a mailto link.
I have already tried making the message like this
Please contact the Login Team for help.
But on the webpage it just displayed that exactly. There was no link.
I use ngFor to loop through my object and make a table.
< <tr>
<th *ngFor="let col of displayedColumns">
{{ col }}
</th>
</tr>
<tr *ngFor="let item of finalResults">
<td>{{ item.key }}</td>
<td>{{ item.value }}</td>
</tr>
<tr></tr>
</table>
Is there some way to do this?
If you want to keep your text as html text then consider using innerHTML binding:
ts
finalResults = [
{
key: 'example#example.com',
value: 'Please contact the Login Team for help.'
}
];
html
<td [innerHTML]="item.value"></td>
Ng-run Example
In component declare
email: string = 'mailto:misesasd#gmail.com'
in template:
<a [href]="email">misesasd#gmail.com</a>
array:
<tr *ngFor="let item of finalResults">
<td><a [href]="item.key">{{item.key}}</a></td>
<td>{{ item.value }}</td>
</tr>
or:
<tr *ngFor="let item of finalResults">
<td>{{item.key}}</td>
<td>{{ item.value }}</td>
</tr>
<tr *ngFor="let item of finalResults">
<td>{{ item.value }}</td>
</tr>
I have created a service named User.service.ts and inside i have written this code:
getContactDetials(){
return this.http.get(this.config.apiUrl + 'assets/data/contact-details.json')
.map(response => response.json());
}
And when i am trying to access the content using this service in contact.component.ts then strangely i am not able to see any results. For further investigation i have logged in the console then the results shows as 'undefined'.
The code for my contact.component.ts is:
contactDetails: any[];
constructor(private _userService: UserService) {
console.log('Contact Tab is pressed!!');
}
ngOnInit() {
this._userService.getContactDetials()
.subscribe(data => this.contactDetails = data.results);
console.log(this.contactDetails);
}
The template where i am binding the data is :
<tbody>
<tr *ngFor="let item of contactDetails">
<td>{{ item.field_email }}</td>
<td>{{ item.field_first_name }}</td>
<td>{{ item.field_last_name }}</td>
<td>{{ item.field_mobile }}</td>
<td>{{ item.field_department }}</td>
<td>{{ item.field_contact_email_address }}</td>
<td>{{ item.field_mobile_1 }}</td>
</tr>
</tbody>
But unfortunately i am not able to display the data in the table. Can anybody help me? What is the mistake i made?
Thanks
If 'data.results' shows undefined, then may if you try to log only 'data' would give you some insights to what you are receiving on the other end.
I want to display my Json data that return from PHP file as like this:
"{\"success\":true,\"message\":\"Transaction history found.\",\"user_transactions\":[{\"user_id\":\"4\",\"amount_charged\":\"4.00\",\"amount_transferred\":\"14400.00\",\"app_rate\":\"3600.00\",\"charged_currency\":\"USD\",\"beneficiary_phone\":\"256775542757\",\"beneficiary_first_name\":\"Sapkota\",\"beneficiary_last_name\":\"Suresh\",\"beneficiary_country\":\"UG\",\"transferred_currency\":\"UGX\",\"transaction_status\":\"Delivered\",\"order_id\":\"259\",\"created_date\":\"2017-07-25 13:35:48\",\"last_modified_date\":\"2017-07-25 13:35:48\"},{\"user_id\":\"4\",\"amount_charged\":\"5.00\",\"amount_transferred\":\"18000.00\",\"app_rate\":\"3600.00\",\"charged_currency\":\"USD\",\"beneficiary_phone\":\"256775542757\",\"beneficiary_first_name\":\"Sapkota\",\"beneficiary_last_name\":\"Suresh\",\"beneficiary_country\":\"UG\",\"transferred_currency\":\"UGX\",\"transaction_status\":\"Delivered\",\"order_id\":\"258\",\"created_date\":\"2017-07-25 06:23:05\",\"last_modified_date\":\"2017-07-25 06:23:05\"}]}"
Which is fetch using Get as like:
$http.get("clients.php").then(function (response) {
$scope.response = response;
$scope.results = JSON.parse(response.data);
console.log($scope.results);
}
The problem is that, don't get any result in console .log & nothing in table row which I have write in this way. So, anybody please help me.
<table>
<tr ng-repeat="result in results.user_transactions">
<td>{{ result.beneficiary_first_name}}</td>
<td>{{ result.transaction_status }}</td>
</tr>
</table>
You need to parse the response as it is string.
$http.get("clients.php").then(function (response) {
$scope.response = response;
$scope.results = JSON.parse(response.data);//Parsing string to JSON
console.log($scope.results);
}
<table>
<tr ng-repeat="result in results.user_transaactions">
<td>{{ res.beneficiary_first_name}}</td>//No need of using index of array
<td>{{ res.transaction_status }}</td>
</tr>
</table>
First you have to parse your string result to JSON using JSON.parse().
$scope.results = JSON.parse(response.data);
Also there is another issue in your html
<table>
<tr ng-repeat="result in results.user_transactions">
<td>{{ result.beneficiary_first_name}}</td>
<td>{{ result.transaction_status }}</td>
</tr>
</table>
Working Demo
I'm working on coupons project, and i want to display to the client all the coupons that available to purchase.
When i click on the button that call to the function "getAllCoupons()" it works and it returns the results in JSON, but when i want to Insert the results into the table with ng-repeat it displays only if the function returns more than one coupon, if there is only one coupon the ng-repeat don't displays nothing.
This is my controller
angular.module('companyApp', []);
angular.module('companyApp').controller('companyController',
function($rootScope, $scope, $http) {
$scope.getAllCoupons = function() {
$http.get("rest/CompanyService/getAllCoupon").success(
function(response) {
$scope.allCoupons = response.coupon;
});
This is my HTML
<div ng-app="companyApp" ng-controller="companyController">
<button class="tablinks" ng-click="getAllCoupons()" id="getAll">Get all coupons</button>
<table align="center" class="table table-striped" style="width: 900px;">
<thead>
<tr>
<th> Id </th>
<th>Coupon Title</th>
<th>Amount</th>
<th>Start Date</th>
<th>End Date</th>
<th>Price</th>
<th>Message</th>
<th>Coupon Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in allCoupons">
<td>{{ x.id }}</td>
<td>{{ x.title }}</td>
<td>{{ x.amount }}</td>
<td>{{ x.startDate }}</td>
<td>{{ x.endDate }}</td>
<td>{{ x.price }}</td>
<td>{{ x.message }}</td>
<td>{{ x.type }}</td>
</tr>
</tbody>
</table>
</div>
But if i write it without the ng-repeat it works and i get it in JSON:
<div ng-app="companyApp" ng-controller="companyController">
<button class="tablinks" ng-click="getAllCoupons()" id="getAll">Get all coupons</button>
{{ allCoupons }}
</div>
The response for single coupon is:
{"coupon":{"amount":"149","endDate":"04/12/2020","id":"6","message":"only big sizes","price":"79.9","startDate":"07/08/2014","title":"pajamas","type":"FASHION"}}
And the response for multiple coupons is:
{"coupon":[{"amount":"60","endDate":"05/09/2020","id":"5","message":"warranty for 1 year","price":"200.99","startDate":"20/02/2014","title":"sunglasses","type":"FASHION"},{"amount":"149","endDate":"04/12/2020","id":"6","message":"only big sizes","price":"79.9","startDate":"07/08/2014","title":"pajamas","type":"FASHION"}]}
Thanks for help :)
You are referencing an object not an array, check the docs for using an object in ngRepeat's arguments.
You would need ng-repeat="(key, value) in allCoupons
Try this
<tr ng-repeat="(key, value) in allCoupons">
<td>{{ value.id }}</td>
<td>{{ value.title }}</td>
<td>{{ value.amount }}</td>
<td>{{ value.startDate }}</td>
<td>{{ value.endDate }}</td>
<td>{{ value.price }}</td>
<td>{{ value.message }}</td>
<td>{{ value.type }}</td>
</tr>
Hope it helps
The server's response for a single coupon is in a different format from what it is for multiple coupons.
You should talk to your server guys and ask them to fix this. The coupon attribute needs to be an array of coupons regardless of whether there is a single coupon or multiple coupons. If there are no coupons, the coupon variable can either be undefined or an empty array.
If the server guys make this change for you, your UI code should work as is.
I understand, sometimes, it can be hard to get the server guys to comply with your request in a timely fashion, especially if they are on a different team.
If this is the case, you can put in a minor patch on the UI code to get the UI working with the existing service, until the server guys come up with a fix. You will have to change your $http.get snippet like below (Also incorporating the .success to .then change suggested by #Claies):
$http.get('rest/CompanyService/getAllCoupon').then(
function(response) {
if(!response.coupon) {
// No Coupons
$scope.allCoupons = [];
} else if(response.coupon instanceof Array) {
// Multiple Coupons
$scope.allCoupons = response.coupon;
} else {
// Single Coupon
$scope.allCoupons = [response.coupon];
}
});
Note: This fix is only a temporary solution. The server code has to be fixed eventually. There is absolutely no justification for the server to send the response in different formats.
I've a table with rides like this:
<tr>
<td>{{ ride.user.name }}</td>
<td>{{ ride.location.from }}</td>
<td>{{ ride.location.to }}</td>
<td>{{ ride.type.name }}</td>
<td>{{ ride.date }}</td>
<td>
<a #click="show" class="btn-show">Show</a>
<a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
<a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a>
</td>
<td><show-ride-modal :ride="ride"></show-ride-modal></td>
</tr>
So the last td makes sure there will pop-up a modal if you click on show. In that modal more details of the selected ride are visible.
The problem is that every always the same ride is being passed to the modal. Why is that?
EDIT
<table class="table" v-if="rides">
<thead>
<tr>
<th>Door</th>
<th>Van</th>
<th>Naar</th>
<th>Type</th>
<th>Datum</th>
</tr>
</thead>
<tbody v-for="ride in rides" is="ride" :ride="ride"></tbody>
</table>
Edit: After posting this I learned that Vue.js requires special behavior in the case of tables. See: http://vuejs.org/guide/components.html#Template-Parsing.
It is hard to answer the question if we have to guess what the rest of your code looks like. However, I see some strange things in your code, so maybe if you look at those the issue can be fixed.
Look at this:
<tbody v-for="ride in rides" is="ride" :ride="ride"></tbody>
The 'is="ride"' attribute and ':ride="ride"' parts don't seem to do anything. 'is=' is used in the dynamic component element to assign the component type, and ':ride' could be used to pass props to a component. But you don't appear to have component.
My suggestion would be change the code to this:
<table class="table" v-if="rides">
<thead>
<tr>
<th>Door</th>
<th>Van</th>
<th>Naar</th>
<th>Type</th>
<th>Datum</th>
<th>Acties</th>
</tr>
</thead>
<tbody v-for="ride in rides" >
<tr>
<td>{{ ride.user.name }}</td>
<td>{{ ride.location.from }}</td>
<td>{{ ride.location.to }}</td>
<td>{{ ride.type.name }}</td>
<td>{{ ride.date }}</td>
<td>
<a #click="show" class="btn-show">Show</a>
<show-ride-modal :ride="ride"></show-ride-modal>
<a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
<a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a>
</td>
</tr>
</tbody>
</table>