So I find this filter here in SO and this filter doesn't have a $watch.
filter.js
.filter('myfilter', function ($filter, moment) {
return function (items, from, to) {
return $filter('filter')(items, 'name', function (v) {
var date = moment(v);
return date >= moment(from) && date <= moment(to);
});
};
})
table.html
<table class="table table-bordered table-sm">
<thead class="">
<tr>
<th>DAY</th>
<th>TIME IN</th>
<th>TIME OUT</th>
<th>DETAILS</th>
<th>TOTAL HOURS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="attendance in displayedCollection | myfilter: startDate: endDate">
<td>{{ attendance.day | date: 'EEEE, MMM d'}}</td>
<td>{{ attendance.timeIn | date:'h:mm a' }}</td>
<td>{{ attendance.timeOut | date:'h:mm a'}}</td>
<td class="text-capitalize">
<i class="fa fa-map-marker" aria-hidden="true"></i> {{ attendance.details }}</td>
<td>{{ attendance.totalHrs | date:'hh:mm'}} </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<strong>Total</strong>
</td>
<td></td>
<td></td>
<td></td>
<td>
<strong>{{ vm.attendance.total }}</strong>
</td>
</tr>
</tfoot>
</table>
How do I watch the filter because displayedCollection.length is not changing?
Related
I'm using vuedraggable inside a Bulma table, but it creates a styling problem:
It's not a problem of the Bulma table. I used this in my own table, and the same issue occurs.
Here is my code:
<table class="table is-fullwidth is-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
</tr>
<draggable v-model="furds" :options="{group:'furds'}" #start="drag=true" #end="drag=false" #change="onChnage">
<tr class="dragndrop" v-for="featured in furds">
<td class="drag-icon"><i class="fa fa-arrows"></i></td>
<td>{{ featured.name }}</td>
<td>{{ featured.brand.name }}</td>
<td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
<td><a :href="`/manage/featured/${featured.id}`">View</a></td>
<td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
</tr>
</draggable>
</tbody>
</table>
Instead of wrapping tr with draggable,pass tbody as draggable element.
<draggable element="tbody" v-model="furds">
See the link for better understanding:
https://jsfiddle.net/dede89/L54yu3L9/ (Example with table) (found in vue draggable official doc)
[[Update: full code(based on question)]]
<table class="table is-fullwidth is-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</tfoot>
<draggable element="tbody" v-model="furds"> <!-- change here -->
<tr>
<td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
</tr>
<tr class="dragndrop" v-for="featured in furds">
<td class="drag-icon"><i class="fa fa-arrows"></i></td>
<td>{{ featured.name }}</td>
<td>{{ featured.brand.name }}</td>
<td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
<td><a :href="`/manage/featured/${featured.id}`">View</a></td>
<td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
</tr>
</draggable>
</table>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable
},
...
}
</script>
The styling issue occurs because vuedraggable uses a <div> as its root element by default, and that <div> (along with its contents) is stuffed into the first column of the table.
Solution: vuedraggable allows changing its root element with the tag property, so you could set it to tbody, replacing the existing <tbody> in the <table>:
<table>
<!-- FROM THIS: -->
<!--
<tbody> 👈
<draggable> 👈
<tr v-for="featured in furds">
...
</tr>
</draggable>
</tbody>
-->
<!-- TO THIS: -->
<draggable tag="tbody">
<tr v-for="featured in furds">
...
</tr>
</draggable>
<table>
I have 2 lists (persons and animals) that I'm displaying with ng-repeat. I want to show these two lists in one table with a heading.
Here is an example how I want to show the data.
I already tried it with ng-show="$first", but that is not the result I want to achieve.
<thead>
<tr>
<th>ID</th>
<th>BIRTHDAY</th>
<th>NAME</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ps in $ctrl.persons" ng-if="$ctrl.valuePersons == true">
<th ng-show="$first">PERSONS</th>
<td>{{ ps.id }}</td>
<td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ ps.name }}</td>
</tr>
<tr ng-repeat="an in $ctrl.animals" ng-if="$ctrl.valueAnimals == true">
<th ng-show="$first">ANIMALS</th>
<td>{{ an.id }}</td>
<td>{{ an.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ an.name }}</td>
</tr>
<tbody>
This will work, as per the documentation for ng-repeat.
...
<tr ng-repeat-start="ps in $ctrl.persons" ng-if="$ctrl.valuePersons == true && $first">
<th>PERSONS</th>
<td></td>
<td></td>
</tr>
<tr ng-repeat-end ng-if="$ctrl.valuePersons == true && !$first">
<td>{{ ps.id }}</td>
<td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ ps.name }}</td>
</tr>
...
This is long but can help you...
<table>
<tr>
<th>ID</th>
<th>BirthDay</th>
<th>NAME</th>
</tr>
<tr>
<td>Persons</td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="ps in $ctrl.persons">
<td>{{ps.id}}<td/>
<td>{{ps.bday}}<td/>
<td>{{ps.name}}<td/>
</tr>
<tr>
<td>Animals</td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="ps in $ctrl.animals">
<td>{{ps.id}}<td/>
<td>{{ps.bday}}<td/>
<td>{{ps.name}}<td/>
</tr>
</table>
var app = angular.module("Profile", [] );
app.controller("ProfileCtrl", function($scope) {
$scope.items = [{'title':'PERSON','data':[{'birth_day':'1/1/2011','name':'a1'},{'birth_day':'1/1/2011','name':'a2'},{'birth_day':'1/1/2011','name':'a3'}]},{'title':'ANIMALS','data':[{'birth_day':'1/1/2011','name':'a1'},{'birth_day':'1/1/2011','name':'a2'},{'birth_day':'1/1/2011','name':'a3'}]}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
<table class="table" border="1">
<thead>
<tr>
<th>ID</th>
<th>BIRTHDAY</th>
<th>Name</thu>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="item in items" ng-init="main_ind= $index">
<td colspan="3">{{item['title']}}</td>
</tr>
<tr ng-repeat-end ng-repeat="val in item['data']">
<td>{{$index+1}}</td>
<td>{{val['birth_day']}}</td>
<td>{{val['name']}}</td>
</tr>
</tbody>
</table>
</body>
I've been working to this kind of data in array
data:[
0:{
name:"Pervies, Peter"
details:[
{date:"2017-11-17",start_time:"08:00:00",end_time:"16:00:00"},
{date:"2017-11-18",start_time:"08:00:00",end_time:"16:00:00"}
]
}
1:{
name:"Ming, Edmund"
details:[
{date:"2017-11-17",start_time:"08:00:00",end_time:"17:00:00"},
{date:"2017-11-18",start_time:"08:00:00",end_time:"17:00:00"}
]
}
]
I want the data to be display like this:
But it always turn out like this:
I use this code below in distributing data in the table
<table>
<thead>
<tr class="text-center location text-white">
<th>Employee</th>
<th>Date</th>
<th>Time In / Time Out</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor= "let da of data; ">
<tr *ngFor= "let s of da.details">
<td>
<strong>{{da.name}}</strong>
</td>
<td>
{{s.date}}
</td>
<td>
<input type="time [value]="s.start_time">
<strong>/</strong>
<input type="time [value]="s.end_time">
</td>
</tr>
</ng-container>
</tbody>
</table>
can you help on how I should display my data in the table properly.
I'm using angular 2
Here is the code to arrange the data in row and col along with display the date in required format
<tbody>
<ng-container *ngFor= "let da of data; ">
<tr>
<td [rowSpan]="da.details.length+1">
<strong>{{da.name}}</strong>
</td>
</tr>
<ng-container *ngFor= "let s of da.details">
<tr>
<td > {{s.date | date:'MMM dd, yyyy'}}</td>
<td><input type=time [value]="s.start_time"><strong>/</strong><input type=time [value]="s.end_time"></td>
</tr>
</ng-container>
</ng-container>
</tbody>
What about
<table>
<thead>
<tr class="text-center location text-white">
<th>Employee</th>
<th>Date</th>
<th>Time In / Time Out</th>
</tr>
</thead>
<tbody>
<tr *ngFor= "let da of data; ">
<td>
<strong>{{da.name}}</strong>
</td>
<td colspan="2">
<tr *ngFor= "let d of da.details; ">
<td>{{d.date | date}}</td>
<td>
<input type="time" [value]="d.start_time"/>
<strong>/</strong>
<input type="time" [value]="d.end_time"/>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
Working demo
Try like this :
here demo link : demo
<table>
<thead>
<tr class="text-center location text-white">
<th>Employee</th>
<th>Date</th>
<th>Time In / Time Out</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let d of data">
<td>{{d.name}}</td>
<td>
<table>
<tr *ngFor="let c of d.details">
<td>
{{c.date}}
</td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let s of d.details">
<td>
<input type="time" [value]="s.start_time">
<input type="time" [value]="s.end_time">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
try this
use parseDate custom function in your component
parseDate(dateString: string): Date {
if (dateString) {
return new Date(dateString);
} else {
return null;
}
}
and call the function where you want convert and the format by this way
{{parseDate(s.date) | date: 'MMM dd, yyyy'}}
note: Also consider #Saurabh Agrawal answer for your table format.
DEMO Result :
I am displaying two json files data in two tables. I am able to console.log() the value of each row selected. I made a submit button, but I am not sure how to get those two values to submit it. Does someone could help me to understand how to do that ?
Below are my two tables
<div class="row">
<div class="col-md-8">
<h1>Choose your outbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="outbound in outbounds" ng-class="{active : isSelected(outbound)}" ng-click="setMaster(outbound)">
<td>{{ outbound.departure }}h</td>
<td>{{ outbound.arrival }}h</td>
<td>{{ outbound.ecoPrice }}</td>
<td>{{ outbound.businessPrice }}</td>
<td>{{ outbound.firstPrice }}</td>
<td>
<input type="radio" name="radioOutbound">
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h1>Choose your inbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="inbound in inbounds" ng-class="{active : isSelected(inbound)}" ng-click="setMaster(inbound)">
<td>{{ inbound.departure }}h</td>
<td>{{ inbound.arrival }}h</td>
<td>{{ inbound.ecoPrice }}</td>
<td>{{ inbound.businessPrice }}</td>
<td>{{ inbound.firstPrice }}</td>
<td>
<input type="radio" name="radioInbound">
</td>
</tr>
</table>
<button type="submit" ng-click="submit()">Submit</button>
</div>
</div>
Below is my AngularJS
// Inbound
$scope.isSelected = function(inbound) {
return $scope.selected === inbound;
}
$scope.setMaster = function(inbound) {
$scope.selected = inbound;
console.log($scope.selected);
}
// Outbound
$scope.isSelected = function(outbound) {
return $scope.selected === outbound;
}
$scope.setMaster = function(outbound) {
$scope.selected = outbound;
console.log($scope.selected);
}
// Submit
$scope.submit = function() {
console.log($scope.selected);
}
add ng-model to radio button
<td>
<input type="radio" name="radioOutbound" ng-model="radio_value1">
</td>
and for the second one also
<td>
<input type="radio" name="radioInbound" ng-model="radio_value2">
</td>
in the submit function you can pass the two values
<button type="submit" ng-click="submit(radio_value1, radio_value2)" >Submit</button>
in the controller
$scope.submit = function(val1, val2){
console.log(val1, val2);
}
if you dont want to pass values in the function then values will be in $scope.radio_value1 and $scope.radio_value2
I've created a plunker that I believe demonstrates your desired goal. My understanding from your code was:
You wanted either the radio button or the row clicked to select the item. The inbound and outbound items were each seperate sections, and only one radio in each should be selected.
All data should be returned back to the controller, once selected. This will send it all back in one objected, broken down by the model.
Within $scope.submit, you will find the selected option for inbound on formData.radioOutbound, and on formData.radioOutbound for the outbound item.
https://plnkr.co/edit/iwHi5NEDJSahG0JJ31ih?p=preview
JS
// Submit
$scope.submit = function(formData) {
console.log(formData);
}
$scope.formData = {
radioOutbound: '',
radioInbound: ''
};
$scope.outbounds = [
{
departure: 'today',
arrival: 'tomorrow',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
},
{
departure: 'tomorrow',
arrival: 'next day',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
}
]
$scope.inbounds = [
{
departure: 'today',
arrival: 'tomorrow',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
},
{
departure: 'tomorrow',
arrival: 'next day',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
}
]
HTML
<div class="row" >
<div class="col-md-8">
<h1>Choose your outbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="outbound in outbounds"
ng-class="{'success' : formData.radioOutbound == this.outbound}"
ng-click="formData.radioOutbound = this.outbound">
<td>{{ outbound.departure }}h</td>
<td>{{ outbound.arrival }}</td>
<td>{{ outbound.ecoPrice }}</td>
<td>{{ outbound.businessPrice }}</td>
<td>{{ outbound.firstPrice }}</td>
<td>
<input type="radio" ng-value="outbound" ng-model="formData.radioOutbound">
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h1>Choose your inbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="inbound in inbounds"
ng-class="{'success' : formData.radioInbound == this.inbound}"
ng-click="formData.radioInbound = this.inbound">
<td>{{ inbound.departure }}h</td>
<td>{{ inbound.arrival }}h</td>
<td>{{ inbound.ecoPrice }}</td>
<td>{{ inbound.businessPrice }}</td>
<td>{{ inbound.firstPrice }}</td>
<td>
<input type="radio" ng-value="inbound" ng-model="formData.radioInbound">
</td>
</tr>
</table>
<button type="submit" ng-click="submit(formData)">Submit</button>
</div>
</div>
Helo,
i have a table with groupsand i want to know how i can collapse categories in my table
Plunker
My HTML:
<table border=1>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td style=" background-color: #006DCC;color: white;" colspan="2">{{group.name}}</td>
</tr>
<tr ng-repeat="member in group.members">
<td>{{ member.name }}</td>
<td>{{ member.age }}</td>
</tr>
</tbody>
</table>
Just wire in a variable to toggle it with ng-hide:
<tr>
<td style=" background-color: #006DCC;color: white;" colspan="2" data-ng-click="hideGroup = !hideGroup">{{group.name}}</td>
</tr>
<tr ng-repeat="member in group.members" data-ng-hide="hideGroup">
<td>{{ member.name }}</td>
<td>{{ member.age }}</td>
</tr>
Updated plunker: http://plnkr.co/edit/ABJ9It8qSqkPGzpYNyMp?p=preview