In bootstrap how to use comboBox with multiple checkbox option as in the attached image.
I used multiple checkbox option in dropdown list as below, but i do not wish drop down list with checkbox, instead wish to have like the image attached.
<select multiple="multiple"> .... </select>
From the below way i got the solution
<table>
<tr>
<td>
<div
style="max-height: 350px; overflow-y: scroll; width: 375px;background: white;"
class="scrollbar style-2">
<table class="table">
<thead align="center">
<tr>
<th style="text-align: center;background: #5cb85c;color : white;">List</th>
<th style="background: white;background: #5cb85c;color : white;"></th>
</tr>
</thead>
<tbody style="background: white;">
<%
for (int i = 0; i < 10; i++) {
%>
<tr style="border: 0">
<td style="border: 0">
<div class="[ form-group ]">
<input type="checkbox" name="fancy-checkbox-default_p3_ii<%=i%>"
id="fancy-checkbox-default_p3_ii<%=i%>" autocomplete="off" />
<div class="[ btn-group ]">
<label for="fancy-checkbox-default_p3_ii<%=i%>"
class="[ btn btn-success ]" style="top: 5px;"> <span
class="[ glyphicon glyphicon-ok ]"></span> <span> </span>
</label> <label for="fancy-checkbox-default_p3_ii<%=i%>"
class="[ btnCustom active ]"> Default Checkbox<%=i%>
</label>
</div>
</div>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</td>
</tr>
</table>
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.
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.
good evening, I'm currently faced with a little challenge here.
I need to remove a checklist item from a list of section(there are list of sections and each section has a list of checklist items too). My html is shown thus.
<div ng-repeat="section in item.supervisionItemSectionSetupModels" >
<div class="col-md-9 form-horizontal">
<div class="alert alert-success">
<strong>Checklist Section - {{$index+1}}</strong>
<div class="pull-right">
<a href="" ng-show="$index>0" type="button" ng-click="removeSection($index)" class="btn btn-danger" tooltip="Remove this section">
<span class="fa fa-trash-o"></span>
</a>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4">Section Name</label>
<div class="col-sm-7">
<input name="sectionName" ng-model="section.name" placeholder="Section name" class="form-control" id="sectionName" />
</div>
</div>
</div>
<div class="col-md-9">
<table class="table">
<thead>
<tr>
<th>#</th>
<th width="60%">What to Check for</th>
<th>Options</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="checklist in section.checkListItems">
<td>{{$index+1}}</td>
<td>
<input type="text" class="form-control" ng-model="checklist.name" style="width: 100%" name="name" placeholder="Checklist Item"/>
</td>
<td>
<select class="form-control col-sm-3" ng-model="checklist.options" name="options"
ng-options="option.options as option.groupName for option in checklistOption">
<option value="">--Select--</option>
</select>
</td>
<td>
<a href="" ng-show="$index>0" ng-click="removeCheckListItem($index)" class="btn btn-xs btn-danger" tooltip="Remove this checklist">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">
Add
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="form-group col-md-9">
Add new section
</div>
While my angularJs code is(in typescript..)
removeCheckListItem(index) {
this.$scope.item.supervisionItemSectionSetupModels[index].checkListItems.splice(index, 1);
}
addChecklistitem(index) {
this.$scope.item.supervisionItemSectionSetupModels[index].checkListItems.push({});
}
addSection(): void {
this.$scope.item.supervisionItemSectionSetupModels.push({ checkListItems: [{}]});
}
removeSection(index) {
this.$scope.item.supervisionItemSectionSetupModels.splice(index, 1);
}
Each time I tried removing a checklist in a section with the index, I get this error message
Error: this.$scope.item.supervisionItemSectionSetupModels[n] is undefined
The addSection method works fine, but the remove checklist is not working
After going through my code, i discovered that in my view, the index been passed to my removeChecklistItem method is the current index of the checklist item of which it's different for the section index. You can see the method body has some issues, I've ruminated on it but it seems I'm not doing the right thing. What am I supposed to do please?
I replaced $index with $parent.$index and it worked fine
<div ng-repeat="section in item.supervisionItemSectionSetupModels" >
<div class="col-md-9 form-horizontal">
<div class="alert alert-success">
<strong>Checklist Section - {{$index+1}}</strong>
<div class="pull-right">
<a href="" ng-show="$index>0" type="button" ng-click="removeSection($index)" class="btn btn-danger" tooltip="Remove this section">
<span class="fa fa-trash-o"></span>
</a>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4">Section Name</label>
<div class="col-sm-7">
<input name="sectionName" ng-model="section.name" placeholder="Section name" class="form-control" id="sectionName" />
</div>
</div>
</div>
<div class="col-md-9">
<table class="table">
<thead>
<tr>
<th>#</th>
<th width="60%">What to Check for</th>
<th>Options</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="checklist in section.checkListItems">
<td>{{$index+1}}</td>
<td> <input type="text" class="form-control" ng-model="checklist.name" style="width: 100%" name="name" placeholder="Checklist Item"/> </td>
<td>
<select class="form-control col-sm-3" ng-model="checklist.options" name="options" ng-options="option.options as option.groupName for option in checklistOption">
<option value="">--Select--</option>
</select>
</td>
<td>
<a href="" ng-show="$index>0"
ng-click="removeCheckListItem($parent.$index)"
class="btn btn-xs btn-danger" tooltip="Remove this checklist">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">
Add
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="form-group col-md-9">
Add new section
</div>
I have implemented two div where i have used some drop down control in a div named as div1 .I want to hide div2 until the any value is selected in drop down.I want to know how to hide or show a div on ng-change or untill any value is selected div2 must not be shown.
Code:-
<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" ng-init="getFormData();">
<div id="div1">
<tr>
<td nowrap>Company Name:
</td>
<td>
<asp:TextBox ID="txtCompanyName" runat="server" CssClass="NormalTextBox" TabIndex="1" Width="160px" Height="10px" ng-model="custom.txtCompanyName" required=""></asp:TextBox>
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<select id="listHomeCountry1" style="width: 182px !important; height: 34px;">
<option value="0">--- Select an option ---</option>
<option data-ng-repeat="Cntry in listHomeCountry" ng-model="custom.listHomeCountry" ng-change="" value="{{Cntry._key}}">{{Cntry._value}}</option>
</select>
</tr>
<div id="div2">
<table style="position: relative; left: 0px;">
<tr align="left">
<td nowrap style="width: 200px">
<asp:Label ID="lblContactAddress1" runat="server" CssClass="NormalTextBox" Width="60%"></asp:Label></td>
<td nowrap>
<asp:TextBox ID="txtContactAddress1" TabIndex="3" Name="txtContactAddress1" runat="server" CssClass="NormalTextBox" Columns="35" Width="160px" Height="10px" ng-model="custom.txtContactAddress1" required=""></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblContactAddress2" runat="server" CssClass="NormalTextBox"></asp:Label></td>
<td>
<asp:TextBox ID="txtContactAddress2" Name="txtContactAddress2" TabIndex="4" runat="server" CssClass="NormalTextBox" Columns="35" Width="160px" Height="10px" ng-model="custom.txtContactAddress2" required=""></asp:TextBox>
</td>
</tr>
</div>
</div>
Now i want untill and unless a value is selected by my dropdown div2 will be hidden.
First assign a variable to your Choice List. For example
<select id="listHomeCountry1" ng-model="homeCounrty">
Then simply use ng-show (doc)
<div id="div2" ng-show="homeCountry">
The above is also equivalent to:
<div id="div2" ng-show="homeCountry != null">
I am implementing a search input box that should search based off of a certain property of the objects that are getting iterated over and I would like them to be selected using a radio button.
For example here is my code:
<span style="margin-bottom: 10px; display: inline-block;">Search: <input ng-model="searchText.CustomerName" /> </span>
<table id="Table1" class="alertTable">
<thead>
<tr>
<th class="xsmCol"><img src="/App_Themes/SkyKick/images/misc/clear.gif" class="iFlag" /></th>
<th>Subject</th>
<th>Customer</th>
<th>Type</th>
<th>Date</th>
<th class="smCol">Actions</th>
</tr>
</thead>
<tbody id="tbAlerts">
<tr ng-repeat-start="alert in alerts | filter:searchText" > <!-- | filter:searchText -->
<td><img src="/App_Themes/SkyKick/images/misc/clear.gif" data-tooltip="{{ alert.tooltip }}" class="{{ 'iAlert' + alert.AlertType }}"/></td>
<td>{{ alert.Summary }}</td>
<td>{{ alert.CustomerName }}</td>
<td>{{ alert.CreatedDate }}</td>
<td>{{ alert.Category }}</td>
<td>
<!-- Tricky little widget logic -->
</td>
</tr>
<tr ng-repeat-end class="alertDetail">
<td></td>
<td colspan="5" ng-bind-html="alert.Details"></td>
</tr>
</tbody>
</table>
As you can see, I am currently filtering based off of the CustomerName field in my array. However, I want to change the logic so that I can select between CustomerName, Subject, Type, and Date using a radio button. So if the user clicks the Date radio button, then the searchText will filter only based off the Date attribute. What is the best way to get this functionality?
Create a set of radio buttons which share the same ng-model value. Use that value to set the key on searchText:
<span style="margin-bottom: 10px; display: inline-block;">Search:
<input ng-model="searchText[selectedSearch]" ng-init="searchText = {};
selectedSearch='CustomerName'" />
</span>
<input type="radio" ng-model="selectedSearch" value="CustomerName" > Customer Name
<input type="radio" ng-model="selectedSearch" value="CreatedDate" > Created Date
<input type="radio" ng-model="selectedSearch" value="Category" > Category
Demo
angular.module('myApp', []).controller('candidateCtrl', function($scope) {
$scope.candidates = [
{name:'Goutam',role:'Engineer',country:'India'},
{name:'Carl',role:'Engineer',country:'Sweden'},
{name:'Margareth',role:'Doctor',country:'England'},
{name:'Hege',role:'Engineer',country:'Norway'},
{name:'Joe',role:'Engineer',country:'Denmark'},
{name:'Rathin',role:'Doctor',country:'India'},
{name:'Birgit',role:'Teacher',country:'Denmark'},
{name:'Mary',role:'Engineer',country:'England'},
{name:'Kai',role:'Teacher',country:'Norway'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div class="container" ng-controller="candidateCtrl">
<h2>Bootstrap inline Radio Buttons</h2>
<div class="row">
<div class="col-lg-4">
<p>Angular JS Filter by Radio Button</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Engineer">Engineer
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Doctor">Doctor
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Teacher">Teacher
</label>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="candidate in candidates | filter:searchText:strict">
<td>{{candidate.name}}</td>
<td>{{candidate.role}}</td>
<td>{{candidate.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>