I'm new to Angular, I'm using ngx-translate all over my app and it is working fine however, I'm not able to figure out how to translate dynamic data even after searching all over the internet I couldn't quite understand how to achieve this, below is what I've tried, your assistance is much appreciated.
en.json
"STATUS_ACTIVE": "Active"
employees.component.html
<tbody>
<ng-container *ngFor="let item of employees">
<tr *ngFor="let employeeStatus of item.employeeJobStatuses">
<td>{{ item.firstName_FL }}</td>
<td>{{ item.position.name_FL }}</td>
<td>{{ item.hiringDate | date }}</td>
<td>{{ item.firstContractingSalary }}</td>
<td>{{ (employeeStatus.status) | translate }}</td>
<td>
<div class="btn-group">
<p><i type="button" (click)="editEmployee(item.id)" class="fa fa-pencil-square-o"></i></p>
<p class="action-center" translate>employees.terminate</p>
<p translate>employees.suspend</p>
</div>
</td>
</tr>
</ng-container>
</tbody>
Please help me out translate employeeStatus.status
Related
i have a flask app running and in an html template i have this
<table style="width:90%">
<thead><tr><th>Name</th><th>Requested_time</th><th>Description</th><th>Assigned_To</th><th>Status</th><th>Type</th><th>Priority</th></tr></thead>
<tbody>
{% for row in rows %}
<tr>
<td>{{ row.name }}<a style="float: right" href="{{url_for('EditUserRequests', Request_id = row.id) }}" >(Edit)</a> </td>
<td>{{ row.Record_Created }}</td>
<td>{{ row.Description }}</td>
<td>{{ row.Assigned_To }}</td>
<td>{{ row.Status_Name }}</td>
<td>{{ row.Type_Name }}</td>
<td>{{ row.Priority_Name }}</td>
</tr>
{% endfor %}
</tbody>
</table>
i want the link called Edit
to be either visible or invisible depending on the string written in the
row.Status_Name
in each of the table's rows
which might change in each row depending on a database
how can it be done in js ?
if there's an example i'll be thankful
thanks to Quentin
this simple made it
<td>{{ row.name }}
{% if row.Status_Name == "Created" %}<a style="float: right" href="{{url_for('EditUserRequests', Request_id = row.id) }}" >(Edit)</a>
{%endif%} </td>
I am displaying a table of customers generated dynamically using v-for. Each row has a button that adds the customer ID in an object that will be sent to the API. The thing is, I want to add the Bootstrap .success class to the clicked row, so the user knows that the customer has been selected, but I can only achieve that all the rows in the table get the .success class. Also, I would like that when the user clicks another customer, the selected customer loses the .success class.
Here's my code:
<table class="table table-responsive table-striped table-hover">
<tbody>
<tr v-for="customer in customers">
<td><button class="btn btn-default" v-on:click.prevent="selectCustomer(customer.id)"><i class="glyphicon glyphicon-ok"></i></button></td>
<td>{{ customer.first_name }}</td>
<td>{{ customer.last_name }}</td>
<td>{{ customer.oib }}</td>
<td>{{ customer.phone }}</td>
<td>{{ customer.email }}</td>
<td>{{ customer.street }} {{ customer.city }}, {{ customer.country }}</td>
</tr>
</tbody>
export default {
data(){
return {
customers: [],
selectedCustomer: ''
}
},
methods: {
selectCustomer(id, clicked){
this.selectedCustomer = id;
console.log(this.selectedCustomer);
}
}
Thank you!
Binding success class to the row based on selectedCustomer value should help you achieve what you're looking for. Something like this, untested:
<table class="table table-responsive table-striped table-hover">
<tbody>
<tr v-for="customer in customers" v-bind:class="{'success': (customer.id == selectedCustomer)}">
<td><button class="btn btn-default" v-on:click.prevent="selectCustomer(customer.id)"><i class="glyphicon glyphicon-ok"></i></button></td>
<td>{{ customer.first_name }}</td>
<td>{{ customer.last_name }}</td>
<td>{{ customer.oib }}</td>
<td>{{ customer.phone }}</td>
<td>{{ customer.email }}</td>
<td>{{ customer.street }} {{ customer.city }}, {{ customer.country }}</td>
</tr>
</tbody>
I have a problem. I have this code but it does not work why? It works in an other project. I have a table and filter it with an input field.
<md-content class="md-padding">
<br>
<md-input-container>
<label>search</label>
<input ng-model="searchCManager" placeholder='lss_user_id'>
</md-input-container>
<table class='table'>
<thead>
<tr class='header'>
<td>user_id</td>
<td>start_number</td>
<td>lss_user_id</td>
<td>agency_number</td>
<td>business_unit_number</td>
<td>office_id</td>
<td>corporate_id</td>
<td>asw_id</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in terminalOverview | filter:searchCManager " ng-class="{'noTerminal': x.terminals.length == '0' || x.terminals.length == 'terminal'}">
<td>{{ x.user_id }}</td>
<td>{{ x.start_number }}</td>
<td>{{ x.lss_user_id }}</td>
<td>{{ x.agency_number }}</td>
<td>{{ x.business_unit_number }}</td>
<td>{{ x.office_id }}</td>
<td>{{ x.corporate_id }}</td>
<td>{{ x.asw_id }}</td>
</tr>
</tbody>
</table>
</md-content>
If you want to filter based on user_id Just try this
<input ng-model="searchCManager.user_id" placeholder='lss_user_id'>
I have a button where I am passing the value back to the controller:
<button type="button" ng-model="activeCustomer" value="active" ng-click="getVal($event)" ng-class="{'active':activeCustomer === 'active'}" class="btn btn-default">Active</button>
Its being stored in the controller like this:
$scope.activeCustomer='active';
$scope.getVal=function(active){
$scope.activeCustomer=active.currentTarget.value;
}
I want to filter my list by $scope.activeCustomer if detail.activeCustomer = $scope.activeCustomer
<tr ng-repeat="detail in theRecords | orderBy:sortType:sortReverse | filter:searchCustomer" ng-click="expandCustomer(detail.theCustId)" class="drillable">
<td>{{ detail.fullname }}</td>
<td>{{ detail.email }}</td>
<td>{{ detail.phone }}</td>
<td>
<p ng-bind="{{ detail.firstcontact }} | date:'dd/MM/yy'"></p>
</td>
<td>{{ detail.theMainAddress }}</td>
<td>{{ detail.paymentType }}</td>
<td>{{ detail.theStatus }}</td>
<td>{{ detail.activeCustomer }}</td>
</tr>
any ideas?
Thanks
You're very close with what you have.
You're already setting the activeCustomer in your controller. Just pass that to the filter.
<tr ng-repeat="detail in theRecords |
orderBy:sortType:sortReverse | filter:activeCustomer">
I'm trying to figure out how to do an if statement so that if the player's batting average is more than .250 it will add a class to the tr of success.
I found the following stack question but I"m not sure which way of utilizing these I could use or should use and how.
http://stackoverflow.com/questions/15810278/if-else-statement-in-angularjs-templates
<tbody>
<tr ng-repeat="player in startingLineupArray track by $index" {{ player.playerBattingAverage > '.250' ? 'class="success"' : ' ' }}>
<td>{{ $index }}</td>
<td>{{ player.playerName }}</td>
<td>{{ player.playerPosition }}</td>
<td>{{ player.playerBattingAverage }}</td>
<td>{{ player.playerBats }}</td>
</tr>
</tbody>
Here is how you can do it...
<tbody>
<tr ng-repeat="player in startingLineupArray track by $index" ng-class="{success: player.playerBattingAverage > .250}">
<td>{{ $index }}</td>
<td>{{ player.playerName }}</td>
<td>{{ player.playerPosition }}</td>
<td>{{ player.playerBattingAverage }}</td>
<td>{{ player.playerBats }}</td>
</tr>
</tbody>
if you want to dynamically add a class, you should use ngClass instead.
AngularJS ngClass conditional