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
Related
I have implemented 2 tab datatable. However when the page first load it will show both datatable.
I cant seem to find the solution. Please help.
Below is the snippet of my code and attached an image.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#example1-tab1"
aria-controls="example1-tab1" role="tab" data-toggle="tab">Pending
Approval</a></li>
<li role="presentation"><a href="#example1-tab2"
aria-controls="example1-tab2" role="tab" data-toggle="tab">Approved</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active"
id="example1-tab1">
<div class="row">
<div class="col-md-6">
<h3>Pending Approval</h3>
</div>
</div>
<div class="table-responsive">
<table id="pendingOffTable"
class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${pendingOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td><input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}"
class="btn btn-success btn-xs approve-off" type="submit"
value="approve">
<span class="fa fa-check-square-o"></span> Approve
</button>
<button th:id="${off.id}"
class="btn btn-danger btn-xs reject-off" type="submit"
value="reject">
<span class="fa fa-times"></span> Reject
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane fade in active"
id="example1-tab2">
<div class="row">
<div class="col-md-6">
<h3>Approved</h3>
</div>
</div>
<div class="table-responsive">
<table id="approvedOffTable"
class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${approvedOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td><input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}"
class="btn btn-danger btn-xs delete-ocoff" type="submit"
value="delete">
<span class="fa fa-times"></span> Delete
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
Javascript
<script type="text/javascript">
$(document).ready(function() {
$('table.table').DataTable();
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
});
});
As shows in the image, the 2 tabs appear but both the datatable appears. After selecting the tabs only 1 table shows. This just occurs when the page first load.
I am using the DataTables Jquery https://datatables.net/ , but i am filling in the table with AngularJS, but when i use any of properties of Data Table the results disappear, i think that is because is running the page and then running the code js , how is correct way for filling the table with AngularJS?
<table
class="table table-striped table-bordered table-hover table-checkable order-column"
id="sample_1">
<!--sample_1 -->
<thead>
<tr>
<th>ID</th>
<th>E-mail</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX"
ng-repeat="obterUsers in ObterUsuarios | orderBy:'username'">
<td>{{obterUsers.id }}</td>
<td class="center">{{ obterUsers.username}}</td>
<td>
<div class="btn-group">
<button class="btn btn-xs green dropdown-toggle" type="button"
data-toggle="dropdown" aria-expanded="false">
Ações <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#!/UsuarioAlteracao/{{obterUsers.id}}">
<i class="fa fa-edit"></i> Editar
</a></li>
<li><a ng-click="deleteUsuario(obterUsers)" href="">
<i class="fa fa-remove"></i> Excluir
</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
Some pictures about program:
how to add buttons horizontaly something like below image, please help me i want add subjects button horizontally in one column dynamically how to possible in angularjs
<table class="table table-bordered table-striped table-hover table-condensed mb-none dataTable no-footer" role="grid">
<thead>
<tr>
<th style="width: 120px;" colspan="1" rowspan="1">Days</th>
<th style="width: 760px;" colspan="1" rowspan="1">Schedules</th>
<th style="width: 100px;" colspan="1" rowspan="1">Add</th>
</tr>
</thead>
<tbody class="gradeX">
<tr ng-repeat="x in additems">
<td>{{x.teacher_name }}</td>
<td><div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Math
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
<td><i class="fa fa-close text-danger" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>
i want below image like this
Here is presented base logic:
angular.module('app',[]).controller('MyController', function($scope){
$scope.items=[
{name:'Sunday', stuff:[]},
{name:'Monday', stuff:[]}
];
$scope.add = function(stuff){
stuff.push(stuff.length);
};
})
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='MyController'>
<table>
<tr>
<th>Day</th>
<th>Schedule</th>
<th></th>
</tr>
<tr ng-repeat='item in items'>
<td>{{item.name}}</td>
<td>
<span ng-repeat='sub in item.stuff'>{{sub}}{{$last ? '' : ','}}</span>
</td>
<td>
<input type='button' value='Add' ng-click='add(item.stuff)'/>
</td>
</tr>
</table>
</div>
I'm creating a web app in mvc with angularjs in which i want to filter the data inside my table but I'm getting error while I debug my code.
This is what the error is
Error: $rootScope:infdig Infinite $digest Loop 10 $digest() iterations
reached. Aborting! Watchers fired in the last 5 iterations: []
I tried something like this
<tr ng-repeat="d in dataintbl| filter:search">
and I added another tr in my thead
<td>
<input type="text" ng-model="search.taskstartdate" placeholder="" class="erp-input" />
</td>
this is how my table looks
<table class="table table-bordered">
<thead>
<tr class="bg-primary">
<th>Task Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Priority</th>
<th>Action</th>
<th ng-hide="true">autoid</th>
</tr>
<tr>
<td>
<input type="text" ng-model="search.taskstartdate" placeholder="" class="erp-input"/>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in dataintbl" ng-class="{'changecolor':(d.IsCompleted=='True')}">
<td>{{d.taskname}}
</td>
<td>{{d.taskstartdate}}</td>
<td>{{d.taskenddate}}</td>
<td ng-class="{'greenrow': (d.taskpriority == 'Low'), 'yellowrow': (d.taskpriority == 'Medium'), 'redrow': (d.taskpriority == 'High')}">
{{d.taskpriority}}
</td>
<td>
<span ng-class="{'hidespan':(d.IsCompleted=='False')}">Completed</span>
<div ng-class="{'hidebutton':(d.IsCompleted=='True')}">
<a href="#" ng-click="updatetask(d)" data-toggle="modal" title="EDIT TASK" data-target="#myModalb"
class="btn btn-warning glyphicon glyphicon-edit"></a>
<a href="#" ng-click="deleteuser(d)" title="DELETE TASK"
class="btn btn-danger glyphicon glyphicon-trash"></a>
<a href="#" ng-click="taskcompleted(d)" title="COMPLETE TASK"
class="btn btn-success glyphicon glyphicon-ok"></a>
</div>
</td>
</tr>
</tbody>
</table>
I just want to understand, how can i give filters to the users?
you need to change the following line
<tr ng-repeat="d in dataintbl" ng-class="{'changecolor':(d.IsCompleted=='True')}">
to something like this
<tr ng-repeat="d in dataintbl | filter:search.taskstartdate" ng-class="{'changecolor':(d.IsCompleted=='True')}">
and everything is looking fine
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