I want a button on-click I want to sort table with last week dates in angularjs. If this is my Angular view page.
<div class="form-inline has-feedback filter-header">
<input type="text" class="form-control" placeholder="Search" ng-model="search.$" />
<!-- <i class="glyphicon glyphicon-search form-control-feedback"></i> -->
<button class="btn btn-default btn-sm" ng-click="hideFilter=!hideFilter">Advanced Search</button>
</div>
<a class="btn btn-default btn-sm pull-right" href="/#/add">Add New</a>
</div> <!-- Grid filter ends -->
<table class="table table-striped table-condensed table-responsive table-hover">
<thead class="data-grid-header">
<!-- table header -->
<tr>
<th>
<span class="fa fa-th-large"></span>
Title
</th>
<th class="hidden-xs">
<span class="fa fa-calendar"></span>
Schedule Date
</th>
</tr>
<!-- table filter -->
<tr ng-hide="hideFilter">
<th><span ng-hide="hideFilter"><input type="text" ng-model="search.title"></span></th>
</tr>
</thead>
<tbody class="data-grid-data">
<tr ng-repeat="visit in visitsList | filter: dateRange | filter: search |orderBy:orderByField:reverseSort">
<td>{{visit.title}}</td>
<td>{{visit.startDate | date:medium}}
</tr>
</tbody>
</table>
dont know how to fill controller to sort last week .
do help thanks in advance
Related
I am doing the pagination in UI side using angular14. But the issue I am facing is that if the items in a page is less than the "itemsPerPage" value then my pagination bar is moving its place. Can't I have the static pagination bar?
I am using NgxPaginationModule for the pagination.
component.html code
<div class="container mt-5">
<div *ngIf="successMsg" class="alert alert-success alert-dismissible fade show" role="alert">
<strong>{{successMsg}}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Employee ID</th>
<th scope="col">Employee Name</th>
<th scope="col">Employee Designation</th>
<th scope="col">Employee Photo</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor= 'let i of readData | paginate: { itemsPerPage: 3, currentPage: p, totalItems: total}'>
<th scope="row">{{i.id}}</th>
<td>{{i.name}}</td>
<td>{{i.des}}</td>
<td><img class="smaller" [src]= "i.image" [alt]= "i.image"> </td>
<td>
<button class="btn btn-sm btn-danger" (click)="deleteID(i.id)">
Delete
</button>
<a [routerLink]="['/create',i.id]" class= "btn btn-sm btn-primary">Update</a>
</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="pageChangeEvent($event)"></pagination-controls>
</div>
</div>
Jquery time picker & Date picker in the table with add row.
jQuery Clone with date picker and time picker & unique id.
In this demo, I can't be showing date picker after editing any row from
cloned textbox please help where I had put the wrong code.
<div class="container">//div start
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-8"><h2>Add Place Details</h2></div>
<div class="col-sm-4">
<button type="button" id = "btn" class="btn btn-info add-field"><i class="fa fa-plus"></i> Add New</button>
</div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Vehicle</th>
<th>Actions</th>
</tr>
</thead>
<tbody class = "multi-fields" id="elements">
<tr class = "multi-field" id="Meal_00">
<td>
<div class="content datepicker"><input type="text" id="Field_00" class = "datepicker_recurring_start"></div>
</td>
<td><div class="bootstrap-timepicker"><input type="text" id="Field_00" class="form-control timepicker"></div></td>
<td><select class="vehicle form-control"><option value = "vehicle1">vehicle1</option><option value = "vehicle2">vehicle2</option><option value = "vehicle3">vehicle3</option></select></td>
<td><a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>//div end
I wanted to sort the column data in ascending order on click of a button.But due to nested ng-repeat directives and nested objects in my json I'm not able to do it.My Json data is very large.I'm kinda stuck from quite a few days now.Any help will be appreciated.
JSON data link is-json link
My HTML looks like this-
<div class="container" >
<div class="row searchbar">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Sort by<span class="caret"></span>
</button>
<ul ng-model="sortColumn" class="dropdown-menu" role="menu">
<li><a >Team 1</a></li>
<li><a >Team 2</a></li>
<li><a >Score 1</a></li>
<li><a >Score 2</a></li>
</ul>
</div>
<input type="text" class="form-control" name="x" ng-model=filterField placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
<table class="table table-striped" id="myTable">
<thead >
<tr class="info ">
<th class="text-center">Match</th>
<th class="text-center">Team 1</th>
<th class="text-center">Score 1</th>
<th class="text-center">Team 2</th>
<th class="text-center">Score 2</th>
</tr>
</thead>
<div ng-controller="matchesController as matchCtrl">
<tbody ng-repeat="match in matchCtrl.matchesData ">
<tr ng-repeat="mydata in match.matches | filter:filterField | orderBy:matchCtrl.orderProperty">
<td class="text-center" >{{match.name |filter:matchname}}<br>
<span id="date">{{mydata.date | date:fullDate }}</span></td>
<td class="text-center" >{{mydata.team1.name | uppercase}}<br>
<span id="code">[{{mydata.team1.code}}]</span>
</td>
<td class="text-center">{{mydata.score1}}<span ng-show="mydata.score1 === null">Not Available</span></td>
<td class="text-center" >{{mydata.team2.name | uppercase}}<br>
<span id="code">[{{mydata.team2.code}}]</span>
</td>
<td class="text-center">{{mydata.score2}}<span ng-show="mydata.score2 === null">Not Available</span></td>
</tr>
</tbody>
</table>
</div>
</div>
My controller looks like this-
myApp.controller('matchesController',['$http',function($http) {
//create a context
var match = this;
this.matchesData=[];
this.loadAllMatches = function(){
$http({
method: 'GET',
url:'https://raw.githubusercontent.com/openfootball/football.json
/master/2016-17/en.1.json',
}).then(function successCallback(response) {
match.matchesData=response.data.rounds;
console.log(match.matchesData);
}, function errorCallback(response) {
alert("some error occurred. Check the console.");
console.log(response);
});
};// end load all blogs
this.loadAllMatches();
}]); // end controller
It would help if you create plunkers for these questions. Basically, just implement a method to change the value of a property using ng-model, and set the orderBy col to ng-model.
I've added '.' notation to ng-model to help with scoping issues as ng-repeat creates it's own scope.
Try this:
<select name="singleSelect" ng-model="sorting.orderCol">
<option value="name">Name</option>
<option value="age">Age</option>
<option value="phone">Phone</option>
</select>
<table class="friends">
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:sorting.orderCol">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
Plunker: https://plnkr.co/edit/Rh6TbmbIUkAjwMeevdP1?p=preview
I have a partial template that contains a <script src='....'/> tag in it.
When user clicks a button I need to render partial template in modal.
so here is my code:
List.html
<script src="App/controllers/detailsCtrl.js" type="text/javascript"></script>
<div class="clearfix"></div>
<h3 class="page-header">All Websites</h3>
<br />
<div ng-app="app" class="" ng-controller="listCtrl" data-ng-init="init();">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>
Name
</th>
<th>
Display Name
</th>
<th>
Created On
</th>
<th>
Source Site
</th>
<th>
State
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="website in model | orderBy:predicate:reverse | filter:paginate">
<td>{{website.Name}}</td>
<td>{{website.DisplayName}}</td>
<td>{{website.DateTime | creationDateFilter | date: 'dd-MM-yyyy hh:mm:ss a'}}</td>
<td>{{website.FK_Name | sourceSiteFilter}}</td>
<td>
<i class="fa fa-toggle-on active"
ng-if="website.State == 'Started'"
ng-click="changeState(website)">
</i>
<i class="fa fa-toggle-on fa-rotate-180 inactive"
ng-if="website.State == 'Stopped'"
ng-click="changeState(website)">
</i>
<td style="text-align:center">
<i class="fa fa-pencil fa-lg"></i>
<i class="fa fa-book fa-lg"></i>
</td>
</tr>
<tr ng-if="model.length == 0">
<td colspan="6" class="text-center"></td>
</tr>
</tbody>
</table>
<center>
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
</center>
</div>
</div>
listCtrl.js
//open modal and shows details of single object
$scope.showDetails = function (websiteName) {
var modalInstance = $modal.open({
templateUrl: 'app/views/details.html',
controller: 'detailsCtrl',
resolve: {
obj: function () {
return websiteFactory.getFilteredObject($scope.model, websiteName);
}
}
});
}
details.html
<div ng-controller="detailsCtrl">
<div class="modal-header">
<h3>Website Details</h3>
</div>
<div class="modal-body">
<table class="table table-bordered" id="details">
<thead></thead>
<tbody>
<tr>
<td>Name</td>
<td>{{singleObject.Name}}</td>
</tr>
<tr>
<td>Display Name</td>
<td>{{singleObject.DisplayName}}</td>
</tr>
<tr>
<td>Description</td>
<td>{{singleObject.Description}}</td>
</tr>
<tr>
<td>Created On</td>
<td>{{singleObject.DateTime | creationDateFilter | date: 'dd-MM-yyyy hh:mm:ss a'}}</td>
</tr>
<tr>
<td>Source Website</td>
<td>{{singleObject.FK_Name}}</td>
</tr>
<tr>
<td>Current State</td>
<td>{{singleObject.State}}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<!--#*<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>*#-->
</div>
</div>
detailsCtrl.js
app.controller('detailsCtrl', ['$scope', '$modalInstance', 'obj', function ($scope, $modalInstance, obj) {
$scope.singleObject = {
Name: obj.Name,
DisplayName: obj.DisplayName,
DateTime: obj.DateTime,
FK_Name: obj.FK_Name,
State: obj.State,
Description: obj.Description
};
$scope.close = function () {
$modalInstance.dismiss('cancel');
};
}]);
Error
Argument 'detailsCtrl' is not a function, got undefined.
If I include this script tag to index.html(my main view page). Everything works.
Problem is that I am adding the script tag but I know script is not rendering. why is this so? How can I lazyload the script file. Or should I always add all the js files to the main view (index.html)?
I have a bootstrap table in which I dynamically display the results of a database search, using Angular's directive ng-repeat. Those results include an email field. I'm trying to display a button to the right of each email cell that would copy the email of that cell into the clipboard.
But that table has no unique Id field, and I don't know how to assign a different id to each row's email field, so that clipboard.js' "data-clipboard-target" knows it has to copy the email of the same row. Right now, every button copies the first row's email, independently of its own row, probably because it looks up the first appearance of the "#emailField" tag.
Any ideas ?
Here's my html file:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="AppCtrl">
<br>
<input type="text" class="form-control" ng-model="query" placeholder="Chercher ici">
<br>
<br>
<h4>Results:</h4>
<table class="table table-striped table-responsive table-condensed table-bordered">
<thead>
<tr>
<th>Client</th>
<th>Contact</th>
<th>Email</th>
<th>Telephone</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in queryResult">
<td>{{ x.client }}</td>
<td>{{ x.contact }}</td>
<td>
<b id="emailField">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
<td>{{ x.telephone }}</td>
<td>{{ x.mobile }}</td>
</tr>
</tbody>
</table>
<h4>Query status:</h4>
<pre class="ng-binding" ng-bind="queryStatus"></pre>
</div>
<!-- Scripts-->
<script src="./bower_components/clipboard/dist/clipboard.min.js"></script>
<script>
new Clipboard('.btn');
</script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./controller.js"></script>
</body>
Try changing this section of markup:
<td>
<b id="emailField">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
to this:
<td>
<b id="emailField_{{$index}}">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField_{{$index}}">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
You can use the $index that is available inside ng-repeat to create a unique id for each email element.