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
Related
I am getting some data from an Api and I want to check if the vtype is "car". Here is how I loop :
<tr v-for="vehicles_group in vehicles_groups.data" :key="vehicles_group.gid">
<td>
<input type="checkbox">
</td>
<!-- <td>{{ vehicles_groups.gid }} </td> -->
<td>{{ vehicles_group.title }}</td>
<td>{{ vehicles_group.vtype }}</td>
<td>{{ vehicles_group.company }}</td>
<td>{{ vehicles_group.active }}</td>
<td>{{ vehicles_group.priceincludes }}</td>
<td>{{ vehicles_group.categories }}</td>
<td>{{ vehicles_group.earlybook }}</td>
<td>{{ vehicles_group.earlybook }}</td>
</tr>
Is there a way in vue to check if the value of a Api output is car console something?
For example
if {{ vehicles_group.vtype }} == car{
console.log('its a car', vehicles_group.vtype )
}
Sure.
If you want to use v-if in your template:
<td v-if="vehicles_group.vtype == 'car'">
It's a car
</td>
<td v-else>
It's not a car
</td>
If you want to this in your component JavaScript code, you can do it as usual:
if (vehicles_group.vtype == "car") {
console.log('its a car', vehicles_group.vtype )
}
I have a table that fills with data from json. So how i can append a new after cllicked element ?
<tbody>
<tr v-for="f in firm" class="main" >
<td id="ccc">{{ f.name.toUpperCase() }}</td>
<td>{{ f.open }}</td>
<td>{{ f.max }}</td>
<td>{{ f.min }}</td>
<td>{{ f.close }}</td>
<td>{{ f.change }}</td>
<td>{{ f.trans }}</td>
<td>{{ f.vol }}</td>
</tr>
</tbody>
This code creata for me my table with data And now i want to click one element and after this element append new tr. I try create methods but every my idea wail
If you change the data that your HTML is rendering, the HTML will update automatically. Since the code renders a <tr> for each item in the firm array, add an item to the firm array to make a new <tr>. See the demo below.
new Vue({
el: '#app',
data: {
firm: []
},
methods: {
addRow() {
this.firm.push({
name: 'new row',
open: 'open',
max: 'max',
min: 'min',
close: 'close',
change: 'change',
trans: 'trans',
vol: 'vol',
})
}
}
})
<div id="app">
<button #click="addRow">Add new row</button>
<table>
<tbody>
<tr v-for="f in firm" class="main">
<td id="ccc">{{ f.name.toUpperCase() }}</td>
<td>{{ f.open }}</td>
<td>{{ f.max }}</td>
<td>{{ f.min }}</td>
<td>{{ f.close }}</td>
<td>{{ f.change }}</td>
<td>{{ f.trans }}</td>
<td>{{ f.vol }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://unpkg.com/vue"></script>
I have a empty table to start, A form with a add button is used to populate rows in table one by one.
Last column in the table is delete and i have populated a hyperlink with ng-click attribute but its not getting fired... i tried onclick function it works.
HTML :
<tr ng-repeat="entity in entities">
<td>{{ $index + 1 }}</td>
<td>{{ entity.entityType }}</td>
<td>{{ entity.orgType }}</td>
<td>{{ entity.entityId }}</td>
<td>{{ entity.name }}</td>
<td>{{ entity.addressLine1 }}</td>
<td>{{ entity.city }}</td>
<td>{{ entity.state }}</td>
<td>{{ entity.zip }}</td>
<td ng-bind-html="entity.edit"></td>
<td ng-bind-html="entity.remove"></td>
</tr>
Javascript this is the click event that is called to add a row in table :
$scope.entities = [];
$scope.addEntity = function() {
console.log($scope.entity);
$scope.entity.$index = $scope.entities.length;
var $el = "<a ng-click='deleteEntity(" + $scope.entity.$index + ")'>Delete</a>";
$scope.entity.edit = $sce.trustAsHtml("<a ng-click='editEntity(" + $scope.entity.$index + ")'>Edit</a>");
$scope.entity.remove = $sce.trustAsHtml($el);
$scope.entities.push($scope.entity);
$scope.reset();
$compile($el)($scope);
}
HTML is created properly, with deleteEntity function have index values.
You can use this directly:
<tr ng-repeat="entity in entities track by $index">
<td>{{ $index + 1 }}</td>
<td>{{ entity.entityType }}</td>
<td>{{ entity.orgType }}</td>
<td>{{ entity.entityId }}</td>
<td>{{ entity.name }}</td>
<td>{{ entity.addressLine1 }}</td>
<td>{{ entity.city }}</td>
<td>{{ entity.state }}</td>
<td>{{ entity.zip }}</td>
<td><a ng-click='editEntity($index)'>Edit</a></td>
<td><a ng-click='deleteEntity($index)'>Delete</a></td>
</tr>
I think this will solve your problem.
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">