I have a problem of scrolling table horizontally inside the collection-repeat and i don't find the solution. Scrolling is working fine on web browser but it does not work on actual android device.
The code is given below
<ion-content>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<div class="list">
<div class="item" collection-repeat="lists in list"
item-height="getItemHeight(lists, $index)"
ng-style="{height:getItemHeight(lists, $index)}">
<h2 style="text-align: center;" class="padding">{{lists.name}}</h2>
<p class="text-center padding">
<img ng-src="{{lists.link}}" width="200px" height"250px">
</p>
<div class="padding">
<ion-scroll direction="x" class="wide-as-needed">
<table class="table1">
<tr>
<th>size
</th>
<th>unit
</th>
<th>box packing
</th>
<th>type
</th>
<th>price
</th>
</tr>
<tr ng-repeat="company in lists.array">
<td>{{company.size}}
</td>
<td>{{company.unit}}
</td>
<td>{{company.packing}}
</td>
<td>{{company.type}}
</td>
<td>{{company.price}}
</td>
</tr>
</table>
</ion-scroll>
</div>
</div>
</div>
</ion-content>
<ion-content>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<div class="list">
<div class="item" collection-repeat="lists in list"
item-height="getItemHeight(lists, $index)"
ng-style="{height:getItemHeight(lists, $index)}">
<h2 style="text-align: center;" class="padding">{{lists.name}}</h2>
<p class="text-center padding">
<img ng-src="{{lists.link}}" width="200px" height"250px">
</p>
<div class="card">
<ion-item>
<ion-scroll direction="x" class="wide-as-needed" zooming="false"
overflow-scroll="false" style="width: 100%; height:100%">
<table class="table1">
<tr>
<th>size
</th>
<th>unit
</th>
<th>box packing
</th>
<th>type
</th>
<th>price
</th>
</tr>
<tr ng-repeat="company in lists.array">
<td>{{company.size}}
</td>
<td>{{company.unit}}
</td>
<td>{{company.packing}}
</td>
<td>{{company.type}}
</td>
<td>{{company.price}}
</td>
</tr>
</table>
</ion-scroll>
</ion-item>
</div>
</div>
</div>
</ion-content>
Related
As per this link i have used all the libs and functions but i can't see the pagination buttons as like above link demo.
I am loading data from the angularjs get method, After data retrieved i am showing this grid. Everything is working good but only pagination is not working.
Item per page is showing only pagination numbers only not showing.
This my HTML code:
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9 text-right">
<form class="form-inline pull-right margin-bottom-basic">
<div class="form-group">
<grid-pagination max-size="5" boundary-links="true" class="pagination-sm" total-items="paginationOptions.totalItems" ng-model="paginationOptions.currentPage" ng-change="reloadGrid()" items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
</div>
</form>
</div>
</div>
<table class="table media-table-data">
<thead>
<tr>
<th class="sortable">
Media Type
</th>
<th sortable="title" class="sortable">
Media Name
</th>
<th class="sortable">
Created By
</th>
<th class="sortable">
Created Date
</th>
<th class="sortable">
Last Modified
</th>
<th class="sortable">
Status
</th>
<!-- <th class="st-sort-disable th-dropdown">
<select class="form-control width-15"
filter-by="statusDisplay"
filter-type="select"
ng-model="status"
ng-change="filter()">
<option value="">All Statuses</option>
<option ng-repeat="option in statusOptions track by option.value"
value="{{option.value}}">{{option.text}}
</option>
</select>
</th> -->
<th class="sortable">
Action
</th>
</tr>
</thead>
<tbody>
<tr ng-show="!medialength">
<td colspan="7" align="center">No Media Available</td>
</tr>
<tr grid-item>
<td>
<a href="" ng-click="goToPlay(item.id,'member.play')">
<span class="filetype" ng-class="{'videofile': item.mediaType==1 || item.mediaType==3,'audiofile': item.mediaType==2}"></span>
<!-- <span style="background:url ({{ item.thumbnail ? item.thumbnail : '/assets/images/grey.png' }})" ></span> -->
<span class="media-thumbline" style="background:url({{ item.thumbnail ? item.thumbnail : '/assets/images/grey.png' }})"></span>
<span class="media-time">{{ item.mediaFileDuration | toMinSec }}</span>
</a>
</td>
<td ng-bind="item.title"></td>
<td ng-bind="userData.name"></td>
<td>{{ item.createdAt | date : "MMM dd, yyyy" }}</td>
<td>{{ item.updatedAt | date : "MMM dd, yyyy" }}</td>
<td>
<label class="inprogresstext" ng-show="item.mediaStatus==1">
<i class="fas fa-sync fa-spin"></i> Upload inprogress</label>
<label class="inprogresstext" ng-show="item.mediaStatus==2">
<i class="fas fa-sync fa-spin"></i> Transcription inprogress</label>
<label class="completedtext" ng-show="item.mediaStatus==3">
<i class="fas fa-check-circle"></i> Completed</label>
<label class="failedtext" ng-show="item.mediaStatus==4">
<i class="fas fa-exclamation-triangle"></i> Upload Failed</label>
<label class="failedtext" ng-show="item.mediaStatus==5">
<i class="fas fa-exclamation-triangle"></i> Transcription Failed </label>
</td>
<td>
<div class="dropdown drop-position" title="more">
<ul class="dropdown-menu dropdwnicon-menu">
<li><a ng-href="{{item.mediaFile}}" download><i class="material-icons">file_download</i> Download</a></li>
<li><a ng-click="openeditModal(item)"><i class="material-icons">mode_edit</i>Edit</a></li>
<li><a ng-hide="item.mediaStatus==2 || !item.mediaStatus==1" ng-click="openDeleteModal(item)" title="Delete {{item.fileType == 2 ? 'Audio' : 'Video'}}"><i class="material-icons">delete</i>Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<div class="col-lg-12 col-md-12 col-sm-12 table-footer-page" ng-if="medialength">
<div class="pager-btn-section">
<form class="form-inline">
<div class="form-group">
<grid-pagination max-size="5" boundary-links="true" class="pagination-sm" total-items="paginationOptions.totalItems" ng-model="paginationOptions.currentPage" ng-change="reloadGrid()" items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
</div>
<div class="form-group items-per-page">
<label for="itemsOnPageSelect2">Items per page:</label>
<select id="itemsOnPageSelect2" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
<option>10</option>
<option>25</option>
<option>50</option>
<option>75</option>
</select>
</div>
</form>
</div>
</div>
</div>
I forgot to add 'pagination' dependency injector in my module, Thats why pagination is not loaded. Now it's fixed.
How do I show different modal data on each subjects displayed?
My Problem: Showing same modal data on each subjects displayed.
My blade view
#section('content')
<!-- Main content -->
<section class="content" style="background-color:#fff; padding-bottom:50px;" id="subjects">
<div class="subjects-content">
<h3>List of Subjects</h3>
<div class="box-body box-self-evaluation" v-show="subjects.length > 0">
<table id="example2" class="table table-hover table-striped sortable">
<thead>
<tr>
<th>Subject Area</th>
<th>Course Title</th>
<th>Failed</th>
<th>View more</th>
</tr>
</thead>
#foreach ($all_subjects as $subject)
<tbody>
<tr>
<td>
<span> {{ $subject->subject_code }}</span>
</td>
<td>
<span> {{ $subject->description }} </span>
</td>
<td>
<span> {{ $subject->grade()->where('grade','F')->count() }} </span>
</td>
<td><span> <div class="btn btn-crimson btn-inline-block" data-toggle="modal" data-target="#myModal">View more info</div> </span></td>
</tr>
</tbody>
#endforeach
</table>
</div>
<div class="confirmation-buttons-self-evaluation">
<div class="btn btn-blueviolet btn-inline-block btn-create">Go to Self-Evaluation Page</div>
</div>
#foreach ($all_subjects as $subject)
<!--MODAL -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- MODAL content -->
<div class="modal-content" style="width:70%; margin:0 auto; margin-top:100px; max-height: calc(100vh - 210px); overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Subject: {{ $subject->subject_code }}</h4>
</div>
<div class="modal-body" style="padding-top:0">
<center>
<table class="table">
<thead>
<th colspan="3" style="text-align:center">List of Disgraceful Students</th>
</thead>
<thead class="failed-header">
<th>Section: <span style="color:#000"> CS <!-- SECTION --> </span></th>
<th>Professor: <span style="color:#000"> John Doe <!-- PROF --> </span></th>
<th>Failed: <span style="color:#000"> 2 <!-- NUMBER OF FAILED SA SECTION --> </span></th>
</thead>
<tbody>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Jashuel </td>
</tr>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Caezar </td>
</tr>
</tbody>
</center>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- /. modal content-->
#endforeach
</section>
#endsection
what is wrong with my code?
how do I solve this?
help me please...
any suggestion or comments are well appreciated thank you!
try to change
data-target="#myModal"
to
data-target="#{{$subject->id}}"
and id in <--modal-->
From
id="myModal"
to
id="{{$subject->id}}"
I am implementing bootstrap dropdown in my Angular application using accordion. When I click on accordion toggle, it is not sliding down and up.
This is my code:
<div class="container-fluid mt100 mr5 ml5">
<div class="row">
<table class='table s12'>
<tr style="background: #e4e9eb;">
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Edit</td>
<td></td>
</tr>
<tr ng-repeat="listItem in Items">
<td>
{{listItem.name}}
</td>
<td>
{{listItem.address}}
</td>
<td>
{{listItem.city}}
</td>
<td>
<a class="dropdown-toggle" ng-click="isCollapsed = !isCollapsed" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</a>
</td>
</tr>
<tr>
<td colspan="3" class="hiddenRow">
<div class="collapse" collapse="isCollapsed">
<table class="table display" style="border-collapse:collapse;">
<thead>
<tr class='pix2' style="background: #e4e9eb;">
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in listItem.subItems'>
<td>{{item.first}}</td>
<td>{{item.second}}</td>
<td>{{item.third}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
What is causing the issue?
how to divide rows to two tables with angularjs
<tr ng-repeat="field in node.fields track by $index" ui-tree-node="" class="ng-scope angular-ui-tree-node" collapsed="false" ng-if="$even">
I have tried this but it is not working for drag and drop
<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$even">
<td class="even">
<a href="#">
{{element}}
</a>
</td>
</div>
<div ng-if="$odd">
<td class="odd">
<a href="#">
{{element}}
</a>
</td>
</div>
</tr>
I am trying to use infinite scroll in a angular UI modal and the modal is defined in ng-template as shown below
<script type="text/ng-template" id="someID" >
<div infinite-scroll="loadMoreEmployees()" infinite-scroll-distance="1">
<div class="modal-header">
<div class="vertical-margin row">
<div class="col-lg-12">
<h2 class="help-block">Departments assign</h2>
</div>
</div>
</div>
<div class="modal-body">
<div class="content-container">
<div class="col-lg-12 col-md-12 simple-data-table-content">
<table data-ng-if="vm.employees!=null || vm.employees.length!=0" class="table table-condensed text-center clear-bottom">
<tbody>
<tr>
<th>Employee No</th>
<th>Employee Name</th>
<th>Email</th>
<th data-ng-repeat="DeptType in vm.DeptTypes track by $index">{{DeptType.name}}</th>
<th></th>
</tr>
<tr data-ng-if="vm.employees==null || vm.employees.length==0"><td colspan="{{vm.DeptTypes.length + 4}}"></td></tr>
<tr data-ng-repeat="employee in vm.employees | limitTo:vm.loadEmployeeLimitCount" data-ng-if="vm.employees!=null && vm.employees.length > 0">
<td class="">{{employee.employeeNumber}}</td>
<td class="">{{employee.name}}</td>
<td class="">{{employee.email}}</td>
<td class="" data-ng-repeat="DeptType in vm.DeptTypes">
<input type="text" only-digits data-ng-model="employee.DeptSummary[DeptType.id]" style="width:50px;" min="1" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
But infinite scroll as does not respond to scroll action, please point out where I am wrong.