Vue if statement while display data from api - javascript

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 )
}

Related

Vuejs appending html after click on element

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>

ng-click not working on dynamic hyperlink

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.

AngularJS repeat filter from input

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'>

Angularjs filter on button click

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">

If statement to show success with angular

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

Categories

Resources