Smart-table and preselection
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.3/smart-table.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
<script src="//code.angularjs.org/X.Y.Z/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
<section ng-app="app" ng-controller="selectionCtrl">
<table st-safe-src="rowCollection" st-table="displayCollection" class="table user-feedback">
<thead>
<tr class="header">
<th st-sort="customer">User</th>
<th st-sort="customer">Customer</th>
<th st-sort="date">Date</th>
<th st-sort="score">Score</th>
<th st-sort="attention">Attention</th>
</tr>
<tr>
<th>
<input st-search="user" placeholder="Search for user" class="input-sm form-control" type="search" />
</th>
<th colspan="4">
<input st-search placeholder="Global search" class="input-sm form-control" type="search" />
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="row in displayCollection" st-select-row="row" class="{{ 'attention-' + row.attention }}">
<td>{{row.user}}</td>
<td>{{row.customer | uppercase}}</td>
<td>{{row.date | date: 'hh:mm yyyy.MM.dd'}}</td>
<td>{{row.score}}</td>
<td>{{row.attention}}</td>
</tr>
<tr ng-repeat-end ng-if="row.isSelected" st-select-row="row" class="tigerbox animate-if">
<td colspan="5">
<h4>
Representative: {{ row.representative}}
</h4>
<div class="row">
<div class="col-xs-4">
Funeral: {{ row.funeral_satisfaction }}
</div>
<div...
CSS
.user-feedback {
th,
tr {
cursor: pointer;
}
tbody tr {
transition: all ease 400ms;
}
tbody {
tr {
&:not(.tigerbox) {
&:hover {
background-color: #1c90f3 !important;
color: white;
}
&.attention-1 {
background-color: #a4ef8c;
}
&.attention-2 {
background-color: gold;
}
&.attention-3 {
background-color: tomato;
}
}
}
.improvements {
margin-top: 2em;
}
}
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition: 1s linear all;
-moz-transition: 1s linear all;
-ms-transition: 1s linear all;
-o-transition: 1s linear all;
transition: 1s linear all;
}
/* du début de l'entrée */
.animate-if.ng-enter {
max-height: 0;
opacity: 0;
}
/* à la fin de l'entrée */
.animate-if.ng-enter.ng-enter-active {
max-height: 999px;
opacity:1;
}
/* du début de la sortie */
.animate-if.ng-leave {
max-height: 999px;
opacity:1;
}
/* à la fin de la sortie */
.animate-if.ng-leave.ng-leave-active {
max-height: 0;
opacity:1;
}
}
JavaScript
$('head style[type="text/css"]').attr('type', 'text/less');
less.env = 'development';
less.refreshStyles();
(function() {
var app = angular.module('app', ['smart-table', 'ngAnimate']);
app.controller('selectionCtrl', ['$scope', '$filter', function(scope, filter) {
scope.rowCollection = [{
user: 'beckman',
customer: 'Gun-Britt Oscarsson',
date: Date.now() - 102032,
score: 3,
attention: 2,
funeral_satisfaction: 1,
advisor_satisfaction: 1,
representation_satisfaction: 1,
representative: 'Gunilla Luiga',
improvements: 'En som är representant från er med mera driv och idéer .',
found: 'Letade på nätet och löste rekommendationer',
recommendation: 'Mycket god service och trevligt bemötande både innan begravningen och vid ceremonin.'
}, {
user: 'beckman',
customer: 'Ingrid Ulveson',
date: Date.now() - 10200321,
score: 4,
attention: 2,
funeral_satisfaction: 1,
advisor_satisfaction: 1,
representation_satisfaction: 1,
representative: 'Gunilla Luiga'
}, {
user: 'anton',
customer: 'Sven Ingemar Isaksson',
date: Date.now() - 120030213,
score: 1,
attention: 3,
funeral_satisfaction: 1,
advisor_satisfaction: 1,
representation_satisfaction: 1,
representative: 'Gunilla Luiga'
}, {
user: 'desiree',
customer: 'Inga-Lill Hansson',
date: Date.now() - 320003213,
score: 5,
attention: 1,
funeral_satisfaction: 1,
advisor_satisfaction: 1,
representation_satisfaction: 1,
representative: 'Gunilla Luiga'
}, {
user: 'nathalie',
customer: 'Remie Bergström',
date: Date.now() - 872003213,
score: 2,
attention: 2,
funeral_satisfaction: 1,
advisor_satisfaction: 1,
representation_satisfaction: 1,
representative: 'Gunilla Luiga'
}];
// Watch row selection
...