<thead>
<tr>
<th ng-repeat="field in data.fields_array track by $index" class="text-nowrap"
scope="col" role="columnheader" aria-sort="{{field == data.o ? (data.d == 'asc'? 'ascending': 'descending') : 'none'}}">
<div class="th-title" title="${Sort by} {{field == data.o ? (data.d == 'asc' ? '${Descending}': '${Ascending}') : '${Ascending}'}}" role="button" tabindex="0" aria-label="{{data.column_labels[field]}} ">{{data.column_labels[field]}}</div>
<i class="fa" ng-if="field == datat-type="text ng-class="{'asc': 'fa-chevron-up', 'desc': 'fa-chevron-down'}[data.d]"></i>
<div class="search-box">
<input type="search" ng-model="data.searchText" placeholder="Search" id="search">
</div>
</th>
</thead>
Ng model should be dynamic
Related
I have a problem with show/hide column in a table with ng-repeat after checking a condition. Here is my code.
<div class="row">
<div class="col-md-12 col-no-pad-mob">
<div class="content-box-with-label without-label with-data-view">
<table class="table table-striped table-bordered table-hover table-responsive table-data-view">
<tr>
<th> </th>
<th>Fee Type</th>
<th>Fee</th>
<th class="th_DSCR_Cal">Capitalize</th>
<th class="th_DSCR_Cal">Amortize</th>
<th>Amortized Interest</th>
<th>Recurring Fee</th>
<th class="boo-tbl-tr-config">Setting</th>
</tr>
<tr ng-repeat="amo in item.trialCalculation.listTrialAmortization | filter:{active: true}">
<td class="boo-tbl-tr-config">
<md-checkbox ng-model="amo.isApply" ng-change="GenerateFee_ChangeEvent(item.trialCalculation.listTrialAmortization,amo, item)" aria-label="Checkbox 1" ng-value="amo.isApply" ng-disabled="statusMatched == true"></md-checkbox>
</td>
<td>
{{amo.feeType}}
</td>
<td>
<input class="form-control" step=".01" ng-model="amo.fee" ng-readonly="statusMatched == true || amo.feeType ==='Stamp Duty'|| amo.feeType ==='Document Fee'|| amo.feeType ==='Introducer Fee'|| amo.feeType ==='Insurance Fee'" ng-disabled="amo.isApply === false"
ng-pattern="/[0-9.,]+/" format="number" type="text" ng-change="ResetAmortization_ChangeEvent(item.trialCalculation.listTrialAmortization,amo, item)">
</td>
<td class="boo-tbl-tr-config">
<md-checkbox ng-model="amo.capitalize" ng-change="ValidateCapitalize_ChangeEvent(item.trialCalculation.listTrialAmortization,amo)" aria-label="Checkbox 1" ng-disabled="statusMatched == true || amo.isApply == false || amo.isCapitalizeEnable == false || amo.amortize == true"></md-checkbox>
</td>
<td class="boo-tbl-tr-config">
<md-checkbox ng-model="amo.amortize" ng-change="GenerateAmortization_ChangeEvent(item.trialCalculation.listTrialAmortization,amo, item)" aria-label="Checkbox 1" ng-value="amo.amortize" ng-disabled="statusMatched == true || amo.isApply == false || amo.isAmortizeEnable == false || amo.capitalize == true"></md-checkbox>
</td>
<td>
<input class="form-control" step=".01" ng-model="amo.amortizedInterest" ng-disabled
ng-pattern="/[0-9.,]+/" format="number" type="text" ng-readonly="true">
</td>
<td>
<input class="form-control" step=".01" ng-model="amo.recurringFee" ng-disabled
ng-pattern="/[0-9.,]+/" format="number" type="text" ng-readonly="true">
</td>
<td ng-hide="statusMatched == true" class="boo-tbl-tr-config">
<a href="#" ng-show="cprinit.editable==true && (amo.isCapitalizeEnable==false || amo.amortize==true)"
ng-click="GenerateAmortization_ChangeEvent(item.trialCalculation.listTrialAmortization,amo, item)" ng-disabled="amo.isApply === false || amo.amortize === false"><i class="fa fa-refresh" aria-hidden="true"></i></a>
</td>
</tr>
<tr ng-hide="statusMatched == true" class="add_new_expen">
<td colspan="8">
<md-button class="md-fab md-mini md-primary inline-input" data-toggle="modal" data-target="#addincomemodal_{{$index}}">
<md-icon md-svg-src="~/Content/images/add-plus-button.svg"></md-icon>
</md-button>
<label class="label-addnewexpen" data-toggle="modal" data-target="#addincomemodal_{{$index}}">Add New Fee Type</label>
</td>
</tr>
</table>
</div>
</div>
</div>
I need to show settings column if only if all the data rows should be checked a condition and at least one row is passed the condition. If any of data row is not able to pass the condition the settings column should not be shown.
Use a function in your controller to this. Loop through all the rows to check for the condition, set $scope.shColumn = true when the condition is met.
In your HTML.
<th ng-if="shColumn">Settings</th>
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.
I need to make a filter over a table in Angular js. I have this code, but I doesn't work. Here, I have 2 dropdowns: for eat_code and feeling_code and I would like to filter the rows after selecting each of them.
<div class="widgets">
<div class="row">
<div class="col-md-12">
<div class ="panel">
<div class="panel-heading">
<h3 class="panel-title">Select PID</h3>
</div>
<div class="panel-body">
<form class="row form-inline ng-pristine ng-valid ng-scope"
novalidate name="getBGsForm">
<div class="form-group col-sm-3 col-xs-6"
ng-class="{'has-error': getBGsForm.patientID.$invalid && (getBGsForm.patientID.$dirty || getBGsForm.$submitted)}">
<input type="text" class="form-control"
ng-model="patientID"
placeholder="PID"
required name="patientID">
<span class="help-block error-block basic-block"
ng-if="getBGsForm.patientID.$error.required">Patient ID is required.</span>
</div>
<button type="submit"
class="btn btn-primary"
ng-click="getBGs()">Show BGs</button>
</form>
</div>
</div>
<div ba-panel>
<div>
<div class="col-md-4">
<select class="form-control"
ng-model="search.eat_code"
ng-options="v.code as (v.code + ' - ' + v.label) for v in dropdownValuesTag">
<option value=""> --- filter by meal tag --- </option>
</select>
</div>
<div class="col-md-4">
<select class="form-control"
ng-model="search.feeling_code"
ng-options="v.code as (v.code + ' - ' + v.label) for v in dropdownValuesSource">
<option value=""> --- filter by source --- </option>
</select>
</div>
</div>
</div>
<div ba-panel>
<div class="horizontal-scroll">
<div class="form-group select-page-size-wrap ">
<label>Rows on page
<select class="form-control selectpicker show-tick"
title="Rows on page" selectpicker
ng-model="smartTablePageSizeBG"
ng-options="i for i in [5, 10, 15, 20, 25]">
</select>
</label>
</div>
</div>
<table class="table" st-table="displayedCollectionBG" st-safe-src="smartTableDataBG" st-set-filter = "myStrictFilter">
<thead>
<tr class="sortable ">
<th st-sort="id">Reading Id</th>
<th st-sort="value">Value</th>
<th st-sort="unit">Unit</th>
<th st-sort="timestamp">Timestamp</th>
<th st-sort="is_control">Is Control</th>
<th st-sort="source">Source</th>
<th st-sort="eat_code">Eat Code</th>
<th st-sort="feeling_code">Feeling Code</th>
<th st-sort="carb"> Carb</th>
<th st-sort="note"> Note</th>
<th st-sort="storedTimestamp">Stored Timestamp</th>
<th st-sort="adaTargetRangeStatus">adaTargetRangeStatus</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in displayedCollectionBG | filter: search">
<td class="table-id">{{item.id}}</td>
<td>{{item.value}}</td>
<td>mg/dl</td>
<td><span ng-bind="item.timestamp | date:'MM / dd / yyyy hh:mm:ss a'"></span></td>
<td>{{item.tags.is_control}}</td>
<td>{{item.tags.source}}</td>
<td>{{item.tags.eat_code}}</td>
<td>{{item.tags.feeling_code}}</td>
<td>{{item.tags.carb}}</td>
<td>{{item.tags.note}}</td>
<td><span ng-bind="item.storedTimestamp | date:'MM / dd / yyyy hh:mm:ss a'"></span></td>
<td>{{item.adaTargetRangeStatus}}</td>
<td>
<div class="buttons">
<a class="btn btn-primary editable-table-button btn-xs" ui-sref="BGs.form({id: {{item.id}}})" ui-sref-opts="{reload: true}">Edit</a>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" class="text-center">
<div st-pagination="" st-items-by-page="smartTablePageSizeBG" st-displayed-pages="5"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
What am I doing wrong? Thank you!
Try this : click here
From it, you have to select 'Ajax column filter support (NEW!)' and right side you will get demo, just click on every column's header, you will get column based filter.
I have a table, in which i would like to only show rows that match some variables, as well as hide/show all rows.
So, with additional variables to add later, how would i implement a hide/show all functionallity preferably with keeping the <"a> tags
<span class="glyphicon glyphicon-triangle-bottom"></span> Expand all
<span class="glyphicon glyphicon-triangle-right"></span> Hide all
<table style="width: 50%" class="table table-striped table-bordered table-hover">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-3">
<col class="col-xs-3">
<col class="col-xs-1">
</colgroup>
<thead>
<th>ID</th>
<th> name</th>
<th> name</th>
<th>Action</th>
</thead>
<tbody>
<tr class="{{ a.b ? 'danger' : 'success' }}" ng:repeat:start="entity in entities">
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>{{a.asd.name}}</td>
<td>
<a class="glyphicon glyphicon-pencil" href="#project/{{project.id}}"></a>
<a class="glyphicon glyphicon-triangle-bottom" href="" class="rowtrigger" data-toggle="collapse" data-target="#detail_{{project.id}}"></div>
</td>
</tr>
<tr ng:repeat:end>
<td colspan="4" class="collapse-row">
<div id="detail_{{a.id}}" class="collapse statuslabel">
<span ng:repeat="version in a.versions" class="label label-{{ version.b ? 'danger' : 'success' }}">
{{version.version}}
</span>
</div>
</td>
</tr>
</tbody>
</table>
You could put a click event on the Hide/Show all and have that set a boolean property in the controller. Then bind that boolean property to the ngHide attribute on the rows. You could do something like ng-hide="hideAll || <whatever other conditions you want>"
Hello i have a form inside a table row within an ng-repeat, inside that form i have a number field and a button(custom directive named "action") now when that button is clicked i want the form to do validation before submitting but when i try nothing happens i get no errors.
<table class="table schedules">
<thead>
<tr>
<th style="text-align:center;" > Ticket Type</th>
<th style="text-align:center;" > Ticket Price (GHS)</th>
<th style="text-align:center;" > How many?</th>
<th></th>
</tr>
</thead>
<tbody>
#if (count($ticketTypes) <= 0))
<tr ng-hide="d.ticketTypes.length > 0">
<td style="text-align:center;" colspan="5">
<h4 style="">There are no tickets available.</h4>
</td>
</tr>
#endif
<tr ng-repeat="type in d.ticketTypes">
<form name="ticketForm" ng-submit="ticketForm.$valid && addToCart('event', d, type.id, $index)" novalidate>
<td style="text-align:center;" ><b><% type.fee_cat_desc %></b></td>
<td style="text-align:center;" ><b><% type.event_fee | currency : '₵' %></b></td>
<td style="text-align:center;" ><b><input type="number" ng-model="line.d.ticket_no" class="form-control" min="1" max="30" style="width:80px !important;" ng-required/></b></td>
<td>
<action text='Buy Ticket' state='<% state %>' index='<% $index %>' selected='<% selectedIndex %>'></action>
</td>
</form>
</tr>
</tbody>
</table>
This is my action directive:
html:
<button type="submit" ng-class="{ 'btn-set': isReady === true || isWorking === true || isComplete === true || hasFailed === true, 'btn-ready-state': isReady === true || selected != index, 'btn-working-state': isWorking === true && selected == index, 'btn-failed-state': hasFailed === true }" ng-cloak>
<i ng-if="isReady === true || selected != index" class="fa fa-shopping-cart"></i>
<img ng-src="/images/loading - small.png" class="img" ng-show="isWorking && selected == index "></span>
<i ng-if="isComplete && selected == index " class="fa fa-check"></i>
<span class="text">
<span ng-if="isReady === true || selected != index"><% text %></span>
</span>
</button>
One of the thing you missed to name="" attribute on a form, it is needed to start form validation on field by angular
<input type="number" name="ticket_no-{{$index}}" ng-model="line.d.ticket_no"
class="form-control" min="1" max="30" style="width:80px !important;" ng-required/>
Refer this SO Answer for more Explaination
You've got multiple <form>s with the same name. This is a problem for angular because it references each form by its name. A quick fix would be to use $index or type to make the names different.
<tr ng-repeat="type in d.ticketTypes">
<form name="ticketForm_{{type}}" ng-submit="ticketForm.$valid && addToCart('event', d, type.id, $index)" novalidate>
<td style="text-align:center;" ><b><% type.fee_cat_desc %></b></td>
<td style="text-align:center;" ><b><% type.event_fee | currency : '₵' %></b></td>
<td style="text-align:center;" ><b><input type="number" ng-model="line.d.ticket_no" class="form-control" min="1" max="30" style="width:80px !important;" ng-required/></b></td>
<td>
<action text='Buy Ticket' state='<% state %>' index='<% $index %>' selected='<% selectedIndex %>'></action>
</td>
</form>
</tr>
Make sure that you have a input field with the type="button" and the name="submit"