Converting ng-repeat table to card - angularjs

i was woundering how i can convert this type of complex ng-repeat from using table to repeat in AngularJS material design.
My markup looks like this now:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>AccountName</th>
<th>AccountID</th>
<th>ContainerID</th>
<th>ContainerName</th>
<th>Path</th>
<th>Favorite</th>
<th>Hide</th>
<th>Count</th>
</tr>
</thead>
<tbody ng-repeat="(k,v) in containers">
<tr ng-repeat="(k1,v1) in v" ng-if="v1.accountId!= null || v1.accountId == ''">
<td>{{ k }}</td>
<td>{{ v1.accountId }}</td>
<td>{{ v1.containerId }}</td>
<td>{{ v1.name }}</td>
<td>View Container</td>
</tr>
</tbody>
</table>
Ive tried using this markup for md-cards but it gets all wrong:
<md-card ng-repeat="(k,v) in containers">
<md-card-content ng-repeat="(k1,v1) in v">
<h2 class="md-title">{{ v1.name }}</h2>
<p>
{{ v1.accountId }}
</p>
</md-card-content>
</md-card>
If you can see the images the request and the ng-repeat it dont look like a table where you have each row for each account/container:

If you don't want to repeat the Acccount value, you can do something like this:
<md-card ng-repeat="(k,v) in containers">
<md-card-content ng-repeat="(k1,v1) in v">
<h2 class="md-title" ng-if="$first">{{ v1.name }}</h2>
<p>
{{ v1.accountId }}
</p>
</md-card-content>
</md-card>

I got it working with this code:
<div class='md-padding' layout="row" flex>
<div layout="row" flex>
<div class="parent" layout="column" ng-repeat="(k,v) in containers">
<md-card ng-repeat="(k1,v1) in v" ng-if="v1.accountId!= null || v1.accountId == ''">
<md-card-content>
AccountName: {{k}}<br>
Accountid: {{ v1.accountId }} <br>
ContainerName: {{ v1.name }}
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<md-button>Save</md-button>
<md-button>View</md-button>
</div>
</md-card>
</div>
</div>
</div>

Related

I have this problem on how to repeat the table inside the ng-repeat based on the field value

I have this problem on how to repeat the table inside the ng-repeat based on the field[rm_count_rack] value
See below the sample and possible outcome.
this is my database.
This is the display of ng-repeat="i in room"
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" ng-repeat="i in room" >
<br>
<table class="column"> **<!-- need to repeat this table based on the
value of i.rm_count_rack** -->
<th colspan="{{i.rm_subbin}}" class="text-center">RACK A</th>
<tbody >
<tr>
<td ><a style="width: 100%" href="javascript:void(0)" class="btn btn-info"><span>1A62</span></a></td>
<td><a style="width: 100%" href="javascript:void(0)" class="btn btn-success"><span>1A62</span></a></td>
<td><a style="width: 100%" href="javascript:void(0)" class="btn btn-danger"><span>1A62</span></a></td>
</tr>
</tbody>
</table>
</div>
This should be the output:
Since ng-repeat only accepts a collection as a parameter. You could try:
<table class="column" ng-repeat="x in [].constructor(i.rm_count_rack) track by $index">
Or
<table class="column" ng-repeat="x in getNumber(i.rm_count_rack)">
And inside your controller
$scope.getNumber = function(num) {
return new Array(num);
}

Data grid pagination not showing in the angularjs

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.

Table is not scrolling inside collection-repeat on android device

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>

How do I show different modal data on each subjects displayed?

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}}"

Recent version of AngularJS broke workings of multiple groups of radio buttons

I had a view with multiple groups of radio buttons that worked great, but was using a really old version of AngularJS (v1.0.2 as I was playing with an existing fiddle I had found on the net)
Example using AngularJS v1.0.2
As soon as I upgraded to v1.4.8, it stopped working as expected - i.e. only the last group of radio buttons in each panel have their applicable radio button checked while all others groups had no radio buttons checked.
Example with newer version of AngularJS
Has anyone got an idea as to what I may be doing wrong? Any help would be much appreciated. Below is the html involved
<body ng-controller="Channels" class="container-fluid">
<div ng-if="sections===null">
Loading...
</div>
<div class="panel-group" id="accordion1" ng-if="sections!==null">
<div class="panel panel-default" ng-repeat="item in sections | orderBy: 'resourceCode'">
<div class="panel-heading">
<div class="glyphicon glyphicon-plus-sign text-primary" style="float: left; margin-right: 5px;"></div>
<a data-toggle="collapse" data-parent="#accordion1" href="#{{getID(item)}}">
<span class="panel-title" ng-bind="item.resourceCode"></span>
</a>
</div>
<div id="{{getID(item)}}" class="panel-collapse collapse" ng-class="{'in': isActiveSection(item)}">
<table class="table">
<thead>
<th class="col-sm-6">Name</th>
<th class="col-sm-2 text-center">Read</th>
<th class="col-sm-2 text-center">ReadWrite</th>
<th class="col-sm-2 text-center">None</th>
</thead>
<tr ng-repeat="subitem in item.subPrivilegeModels | orderBy: 'resourceCode'">
<td class="col-sm-6"><span ng-bind="subitem.resourceCode"></span></td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READ'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READWRITE'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'NONE'"/>
</td>
</tr>
<tbody>
</table>
</div>
</div>
</div>
not to worry...managed to solve it using a form element between the sections and changed the naming of the radiobuttons
<body ng-controller="Channels" class="container-fluid">
<div class="panel-group" id="accordion1" ng-if="sections!==null">
<div class="panel panel-default" ng-repeat="item in sections | orderBy: 'resourceCode'">
<div class="panel-heading">
<div class="glyphicon glyphicon-plus-sign text-primary" style="float: left; margin-right: 5px;"></div>
<a data-toggle="collapse" data-parent="#accordion1" href="#{{getID(item)}}">
<span class="panel-title" ng-bind="item.resourceCode"></span>
</a>
</div>
<div id="{{getID(item)}}" class="panel-collapse collapse" ng-class="{'in': isActiveSection(item)}">
<form>
<table class="table">
<thead>
<th class="col-sm-6">Name</th>
<th class="col-sm-2 text-center">Read</th>
<th class="col-sm-2 text-center">ReadWrite</th>
<th class="col-sm-2 text-center">None</th>
</thead>
<tr ng-repeat="subitem in item.subPrivilegeModels | orderBy: 'resourceCode'">
<td class="col-sm-6"><span ng-bind="subitem.resourceCode"></span></td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$index}}" ng-model="subitem.access" ng-value="'READ'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$index}}" ng-model="subitem.access" ng-value="'READWRITE'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$index}}" ng-model="subitem.access" ng-value="'NONE'"/>
</td>
</tr>
<tbody>
</table>
</form>
</div>
</div>
</div>

Resources