How to make search bar that search in different column - html

I trying to make search bar that search in different column I have an property table where I want to search the data with different things like I want to search data with price range an also I want to search data with area range. I make this in asp.net core mvc. I want to make search look like that https://www.zameen.com/
My View:
#model IEnumerable<eHouse.Models.RentModel>
<form>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" style="width: 700px; color:#000000; text-align: left;" placeholder="Search Houses" onclick="filterfunction()">
<button type="submit" class="searchButton" >
<i class="fa fa-search"></i>
</button>
</div>
<div id="filter">
<select>
<option value="Kanal">Kanal</option>
<option value="Marla">Marla</option>
<option value="Square Feet">Square Feet</option>
<option value="Square Meter">Square Meter</option>
<option value="Square Yards">Square Yards</option>
</select>
<input type="text" placeholder="area" />
<input type="text" placeholder="price" />
</div>
</div>
</form>
Kindly also tell me that how can I bind data with this to display in this div.
<div class="property_information" >
#foreach (var item in Model)
{
<div class="home-info">
<span id="houseid">
</span>
<a href="#" class="home-images">
<img src="#item.pic1" />
</a>
<div class="home-data">
<div class="home-name">
<p>#item.tittle</p>
</div>
<div class="price">
<p>#item.price</p>
</div>
<div class="features">
<span>
#item.bedroom
</span>
<span>
#item.bathroom
</span>
<span>
2
</span>
</div>
<div class="desc">
#item.descrip
</div>
<div class="contact-save">
<a href="#" class="phone_number" id="favorite" onclick="Fav(this)" data-id="#item.id" >
<i class="fas fa-heart" style=" color: white;"></i>
</a>
<div class="popup" onclick="myFunction()">
<a href="tel:+928754756478" class="phone_number" onclick="call()">
</a>
</div>
<div class="popupmsg" onclick="myFunctionmsg()">
<a href="#" class="phone_number open_message" onclick="msg()">
</a>
</div>
<a href="#" class="phone_number" onclick="del(this)" data-id="#item.id">
<i class="fas fa-trash-alt" style=" color: white;"></i>
</a>
</div>
</div>
</div>
}
</div>
My Controller:
public IActionResult Rent(int PageNumber = 1)
{
var data = rdb.GetDataHouse();
var datas = rdb.GetDataHouse();
ViewBag.Data = datas.ToList().Take(6);
ViewBag.Totalpages = Math.Ceiling(data.Count()/6.0);
data = data.Skip((PageNumber - 1) * 6).Take(6).ToList();
return View(data);
}

try using tables and import jquery data tables library
<table id="table">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</tbody>
</table>
<script>
$('#table').DataTable({
processing: true,
serverSide: true,
...rest
})
</script>

Related

Search bar filters in ASP.NET Core MVC

I would like to user firstly select the filters which is given in search bar dropdown like AREA or PRICE RANGE etc. I do not know how to put filter and also I want to display those search in on same page. I create this in ASP.NET Core MVC using ADO.NET for database using the SQL queries.
My view:
#model IEnumerable<eHouse.Models.RentModel>
<div class="navbar-left-section">
<form>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" style="width: 700px; color:#000000; text-align: left;" placeholder="Search Houses">
<button type="submit" class="searchButton" >
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
Here is how I display the data:
<div class="property_information" >
#foreach (var item in Model)
{
<div class="home-info">
<span id="houseid">
</span>
<a href="#" class="home-images">
<img src="#item.pic1" />
</a>
<div class="home-data">
<div class="home-name">
<p>#item.tittle</p>
</div>
<div class="price">
<p>#item.price</p>
</div>
<div class="features">
<span>
#item.bedroom
</span>
<span>
#item.bathroom
</span>
<span>
2
</span>
</div>
<div class="desc">
#item.descrip
</div>
<div class="contact-save">
<a href="#" class="phone_number" id="favorite" onclick="Fav(this)" data-id="#item.id" >
<i class="fas fa-heart" style=" color: white;"></i>
</a>
<div class="popup" onclick="myFunction()">
<a href="tel:+928754756478" class="phone_number" onclick="call()">
</a>
</div>
<div class="popupmsg" onclick="myFunctionmsg()">
<a href="#" class="phone_number open_message" onclick="msg()">
</a>
</div>
<a href="#" class="phone_number" onclick="del(this)" data-id="#item.id">
<i class="fas fa-trash-alt" style=" color: white;"></i>
</a>
</div>
</div>
</div>
}
</div>
Here I want to just display the results of search.
My controller:
public IActionResult Rent(int PageNumber = 1)
{
var data = rdb.GetDataHouse();
var datas = rdb.GetDataHouse();
ViewBag.Data = datas.ToList().Take(6);
ViewBag.Totalpages = Math.Ceiling(data.Count()/6.0);
data = data.Skip((PageNumber - 1) * 6).Take(6).ToList();
return View(data);
}
I tried as below:
In View
#model SearchBarModel
<form asp-action="SearchBarTest">
<a>Filter:</a>
<input list="options" asp-for="FilterProperty" />
<datalist id="options">
<option value="Price"></option>
<option value="Location"></option>
</datalist>
<br />
<a>Range</a>
<input list="range" asp-for="Range"/>
<datalist id="range">
</datalist>
<br />
<input type="submit" value="Submit" />
</form>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
$("#FilterProperty").change(function () {
var val = $("#FilterProperty").val()
$("#range option").remove()
if (val == "Price")
{
$("#range").append('<option value="10~20"></option>');
$("#range").append('<option value="20~30"></option>');
}
if (val == "Location")
{
$("#range").append('<option value="China"></option>');
$("#range").append('<option value="American"></option>');
}
});
</script>
Model:
public class SearchBarModel
{
public string FilterProperty { get; set; }
public string Range { get; set; }
}
Controller:
[HttpPost]
public IActionResult SearchBarTest(string FilterProperty,string Range)
{
return View();
}
Result:

Additional text boxes return old value, how do I make my textboxes blank?

I have made text boxes for my website using Angular, users have an option to add more information by clicking a button that gives them another group of text boxes to fill in. However, when this happens the new text boxes appear with the previous information I filled in. I want the additional text boxes to be blank as they were with the first set, but I am not sure how to achieve this.
<button type="button" class="close" ng-click="$ctrl.closeInfoModel()">×</button>
<h5 class="title">Add Details</h5>
</div>
<div class="modal-body">
<ng-form name="detailsForm">
<div class="row">
<div class="col-sm-12">
<h5 class="modal-title">Client Details:
<a data-ng-show="!$ctrl.isEditingDetails && !$ctrl.addingAnotherSetOfDetails"
data-ng-click="$ctrl.addingAnotherSetOfDetails = true"><i class="tools-plus fa fa-plus" aria-hidden="true"></i></a>
<span data-ng-show="$ctrl.isEditingDetails || $ctrl.addingAnotherSetOfDetails">
<a title="Save" data-ng-click="$ctrl.saveDetails(detailsForm.$valid)" ><i class="tools-plus fa fa-floppy-o" aria-hidden="true"></i></a>
<a title="Saving" ng-if="$ctrl.isSavingDetails"><i class="tools-plus fa fa-spinner fa-spin" aria-hidden="true"></i></a>
<a title="Cancel" data-ng-click="$ctrl.stopEditingOrAdding()"><i class="tools-plus fa fa-times" aria-hidden="true"></i></a>
</span></h5>
<br>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table" ng-if="$ctrl.clientDetails.length == 0">
<thead>
<tr>
<td><b>Desired Amount</b></td>
<td><b>Credit Limit</b></td>
</tr>
</thead>
<tbody>
<tr>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="desiredAmount" ng-model="$ctrl.inputDesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
<table class="table" ng-if="$ctrl.clientDetails.length > 0">
<thead>
<tr>
<td><b>Desired Amount</b></td>
<td><b>Credit Limit</b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="criteria in $ctrl.clientDetails">
<td ng-if="!$ctrl.isEditingDetails">{{criteria.desiredAmount}}</td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="desiredAmount" ng-model="$ctrl.inputdesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td ng-if="!$ctrl.isEditingDetails">{{criteria.CreditLimitLimit}}</td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
<table class="table" ng-if="$ctrl.addingAnotherSetOfDetails">
<thead>
</thead>
<tbody>
<tr>
<td>
<input name="desiredAmount" ng-model="$ctrl.inputdesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td>
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
</div>
</div>
Component file
All references to the function that adds text boxes are below, I set addingAnotherSetOfDetails to false in the component controller
public stopEditingOrAdding(): void {
this.isEditingDetails = false;
this.addingAnotherSetOfDetails = false;
}
public saveDetailsForClients(isFormValid: boolean): void {
if (!isFormValid) {
return;
}
let clientDetails = new app.domain.detailsCriteriaModel(this.inputDesiredAmount, this.inputCreditLimit);
this.detailsCriteria.push(clientDetails);
this.isEditingDetails = false;
this.addingAnotherSetOfDetails = false;
}

Angular showing json object in html table

Hello guys i have json data from firestore and i want to display these data in html table.
This is my customer-list.component.html
<body>
<div class="container">
<div class="title">
<h3>Customer Table</h3>
</div>
<div class="row">
<div class="col-md-12">
</div>
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="text-center">#</th>
<th>Name</th>
<th>Age</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<div *ngFor="let customer of customers" style="width: 300px;">
<app-customer-details [customer]='customer'></app-customer-details>
</div>
<div style="margin-top:20px;">
<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
</div>
</tbody>
</table>
</div>
</div>
Seems like there is nothing wrong in there.
This is my customer-details.component.html
<div *ngIf="customer">
<tr>
<td>
<label>First Name: </label> {{customer.name}}
</td>
<td>
<label>Age: </label> {{customer.age}}
</td>
<td>
<label>Active: </label> {{customer.active}}
</td>
<span class="button is-small btn-primary" *ngIf='customer.active' (click)='updateActive(false)'>Inactive</span>
<span class="button is-small btn-primary" *ngIf='!customer.active' (click)='updateActive(true)'>Active</span>
<span class="button is-small btn-danger" (click)='deleteCustomer()'>Delete</span>
</tr>
</div>
But my table output is :
Thanks for answers.
When you look at the DOM tree you will find out that
<tr><app-customer-details>...</app-customer-details</td>
This will not result in the component rendering inside the table as a but will cram the entire component HTML template inside one column.
By adding an attribute selector to the component i.e. selector: 'app-customer-details, [app-customer-details]', you can add the selector directly to the element like so and now the elements inside the component HTML template will render correctly inside the table.
Look at this link;
The correct code is as follows:
Customer-list.component.html
<div class="container">
<div class="title">
<h3>Customer Table</h3>
</div>
<div class="row">
<div class="col-md-12">
</div>
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<!-- <th class="text-center">#</th> -->
<th>Name</th>
<th>Age</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let customer of customers" [customerDetails]="customer">
</tr>
<div style="margin-top:20px;">
<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
</div>
</tbody>
</table>
</div>
</div>
</div>
</div>
Customer-details.component.html
<td>
{{customerDetails.name}}
</td>
<td>
{{customerDetails.age}}
</td>
<td>
{{customerDetails.active}}
</td>
Customer-details.component.ts
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'customerDetails, [customerDetails]',
templateUrl: './customer-details.component.html',
styleUrls: ['./customer-details.component.css']
})
export class CustomerDetailsComponent implements OnInit {
#Input() customerDetails: object = {};
constructor() { }
ngOnInit() {
}
}
Don´t limit the width of a customer´s component to 300px, like you did here:
<div *ngFor="let customer of customers" style="width: 300px;">
You have many things which will not render your table properly:
<tbody>
<div *ngFor="let customer of customers" style="width: 300px;">
<app-customer-details [customer]='customer'>
</app-customer-details>
</div>
....
</tbody>
This will render like this:
<tbody>
<div ...>
<app-customer-details>
<div> <tr>.....</tr></div>
</app-customer-details>
</div>
....
</tbody>
Which is not correct HTML.
Change you detail component to use ng-template:
<ng-template >
<tr *ngIf="customer">
<td><label>First Name: </label> {{customer.name}}</td>
<td><label>Age: </label> {{customer.age}}</td>
<td><label>Active: </label> {{customer.active}}</td>
<td>
Note: All spans should also be inside a TD tag
</td>
</tr>
</ng-template>

Bigcommerce Edit PayPal Button & Extend Link Area

We are using PayPal Express to quick checkout on the cart level. We would like to add "another" button that says PayPal Credit but has the same target with the original PayPal Express button. Extending clickable area of the first button would resolve the issue. Or could it be possible to make the 2nd button have the same target?
<script type="text/javascript">
lang.InvalidQuantity = "%%LNG_InvalidQuantity%%";
lang.Calculating = "%%LNG_Calculating%%"
lang.CalculateShipping = "%%LNG_CalculateShipping%%"
lang.ChooseShippingMethod = "%%LNG_ChooseShippingMethod%%"
lang.CartRemoveConfirm = '%%LNG_CartRemoveConfirm%%';
lang.ConfirmRemoveGiftWrapping = '%%LNG_ConfirmRemoveGiftWrapping%%';
lang.SelectCountry = '%%LNG_ChooseShippingCountry%%';
lang.SelectState = '%%LNG_ChooseShippingState%%';
lang.EnterZip = '%%LNG_EnterShippingZip%%';
</script>
<script src="%%GLOBAL_CdnAppPath%%/javascript/jquery/plugins/imodal/imodal.js?%%GLOBAL_JSCacheToken%%" type="text/javascript"></script>
<div class="Block Moveable Panel" id="CartContent_modified">
<div class="BlockContent">
<div style="display: %%GLOBAL_HideShoppingCartGrid%%" id="CartFormContainer">
<form enctype="multipart/form-data" onsubmit="return Cart.ValidateQuantityForm(this);" action="/cart.php" name="cartForm" id="cartForm" method="post">
<input type="hidden" name="action" value="update" />
<table class="CartContents Stylize General" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="HL-CartItems" colspan="2">%%LNG_CartItems%%</th>
<th class="HL-Qty">%%LNG_Qty%%</th>
<th class="HL-Remove"> </th>
<th class="HL-ItemPrice">%%LNG_ItemPrice%%</th>
<th class="HL-Total">%%LNG_HC_total%%</th>
</tr>
</thead>
<tfoot>
<tr class="SubTotal">
<td colspan="6"><div>%%LNG_Subtotal%% <em class="ProductPrice">%%GLOBAL_CartItemTotal%%</em></div></td>
</tr>
<tr class="SubTotal" style="%%GLOBAL_HideGiftWrappingTotal%%">
<td colspan="6"><div>%%LNG_GiftWrapping%% <em class="ProductPrice">%%GLOBAL_GiftWrappingTotal%%</em></div></td>
</tr>
%%SNIPPET_NormalCoupons%%
<tr class="SubTotal" style="%%GLOBAL_HideDiscountAmount%%">
<td colspan="6"><div>%%LNG_Discount%% <em class="ProductPrice">%%GLOBAL_DiscountAmount%%</em></div></td>
</tr>
<tr class="SubTotal" style="display:none;">
<td colspan="6" class="HL-ShoppingCartShippingEstimator">
<div>
<em>%%LNG_CalculateShippingHandling%%</em>
<div class="EstimateShipping" style="display: none;">
<div class="EstimatedShippingMethods" style="display: none;">
<div class="ShippingMethodList">
</div>
</div>
<dl class="hideThis">
<dt><span class="Required">*</span> %%LNG_Country%%:</dt>
<dd>
<select name="shippingZoneCountry" id="shippingZoneCountry" onchange="Cart.ToggleShippingEstimateCountry();">
%%GLOBAL_ShippingCountryList%%
</select>
</dd>
<dt><span class="Required" id="shippingZoneStateRequired">*</span> %%LNG_StateProvince%%:</dt>
<dd>
<select style="display: %%GLOBAL_ShippingHideStateList%%" name="shippingZoneState" id="shippingZoneState">
%%GLOBAL_ShippingStateList%%
</select>
<input style="display: %%GLOBAL_ShippingHideStateBox%%" type="text" class="Textbox" name="shippingZoneStateName" id="shippingZoneStateName" value="%%GLOBAL_AddressState%%" />
</dd>
<dt><span class="Required">*</span> %%LNG_ZipPostcode%%:</dt>
<dd><input type="text" class="Textbox" name="shippingZoneZip" id="shippingZoneZip" value="%%GLOBAL_ShippingZip%%" /></dd>
<!--dd class="Submit EstimateShippingButtons">
<input type="button" onclick="Cart.EstimateShipping();" value="%%LNG_CalculateShipping%%" class="btn alt" />
<div>%%LNG_Cancel%%</div>
</dd-->
</dl>
<p class="Submit EstimateShippingButtons">
<span>%%LNG_Cancel%% %%LNG_or%% </span><input type="button" onclick="Cart.EstimateShipping();" value="%%LNG_CalculateShipping%%" />
</p>
</div>
</div>
</td>
</tr>
<tr style="display:%%GLOBAL_HideShoppingCartShippingCost%%" class="SubTotal ShippingRow">
<td colspan="6"><div>%%LNG_Shipping%% (%%GLOBAL_ShippingProvider%%) <em class="ProductPrice">%%GLOBAL_ShippingCost%%</em></div></td>
</tr>
%%SNIPPET_FreeShippingCoupons%%
<tr style="display: %%GLOBAL_HideShoppingCartHandlingCost%%" class="SubTotal">
<td colspan="6"><div>%%LNG_Handling%% <em class="ProductPrice">%%GLOBAL_HandlingCost%%</em></div></td>
</tr>
%%GLOBAL_Taxes%%
%%SNIPPET_GiftCertificates%%
<tr class="SubTotal gtotal">
<td colspan="6"><div>%%LNG_GrandTotal%% <em class="ProductPrice">%%GLOBAL_CartTotal%%</em></div></td>
</tr>
%%GLOBAL_InclusiveTaxes%%
</tfoot>
<tbody>
%%SNIPPET_CartItems%%
</tbody>
</table>
<div class="KeepShopping">
Continue shopping
</div>
<div class="updateCart">
<input class="btn" type="submit" value="Update Cart" title="%%LNG_Update%%" />
</div>
</form>
<div class="ProceedToCheckout">
<!--div class="CheckoutButton" style="%%GLOBAL_HideCheckoutButton%%">
<a class="btn" href="%%GLOBAL_CheckoutLink%%" onclick="" title="%%LNG_CheckoutButtonTitle%%">%%LNG_HC_proceedcheckout%%</a>
</div-->
<div class="CheckoutButton" style="%%GLOBAL_HideCheckoutButton%%">
<a href="%%GLOBAL_CheckoutLink%%" onclick="%%GLOBAL_OptimizerLinkFunction%%" title="%%LNG_CheckoutButtonTitle%%">
%%GLOBAL_CartCheckoutButtonOptimizerScriptTag%%
<img src="https://cdn2.bigcommerce.com/server5400/vpslo31z/templates/__custom/images/blue/checkout.gif" alt="" />
%%GLOBAL_CartCheckoutButtonOptimizerNoScriptTag%%
</a>
</div>
<div class="AlternativeCheckout" style="%%GLOBAL_HideMultipleAddressShipping%%">
<p class="PTB20"><span style="%%GLOBAL_HideMultipleAddressShippingOr%%">-- %%LNG_or%% --</span><strong>%%LNG_CheckoutWithMultipleAddresses%%</strong></p>
</div>
%%GLOBAL_AdditionalCheckoutButtons%%
<div class="AlternativeCheckout">
<img src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/ppcredit_MD_BNPOT_1x.png" alt="PayPal Credit" /> </div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div style="display: %%GLOBAL_HideShoppingCartEmptyMessage%%">
<p class="InfoMessage">
%%LNG_NoItemsInCart%%
</p>
%%LNG_EmptyCartInfo%%
<br>
%%LNG_ContinueShopping%% %%LNG_OnThe%% %%GLOBAL_StoreName%% %%LNG_EmptyHomePage%%
</div>
</div>
</div>
<script type="text/javascript">
if (location.pathname !== '/checkout.php'){
$('.EstimateShippingLink').click();
$('#shippingZoneCountry').val(226);
$('#shippingZoneState').val(51);
$('#shippingZoneZip').val(19132);
/*
$('#shippingZoneCountry').change(function() {
$('#shippingZoneState').val(51);
$('#shippingZoneState').change(function(){
$('#shippingZoneZip').val(19132);
});
});*/
$('.Submit.EstimateShippingButtons > input').click();
$('.hideThis').hide();
$('.Submit.EstimateShippingButtons').hide();
}
$(document).ready(function(){
//var labelForFixedShipping= $("div.shippingquote label").filter(function() { return ($(this).text().trim() === "Fixed Shipping") });
//$("#shippingLabel").text($("#shippingLabel").text().replace("Fixed Shipping", "Your Shipping Cost"));
//alert($('#shippingLabel').html());
//alert(labelForFixedShipping);
//alert("Text");
//alert(labelForFixedShipping.text());
//labelForFixedShipping.text("Your Shipping Cost");
var ht = $("label[for = shippingLabel]").text();
//alert(ht);
});
</script>
<script type="text/javascript">
$(function() {
var cartSubtotal = parseFloat("%%GLOBAL_CartItemTotal%%".replace(/[$,]/g, ''));
if (cartSubtotal > 50) {
$("<a href='http:/yourdomain.com/cart.php?action=add&product_id=8122'></a>").click();
}
});
</script>
<script>
if (location.pathname !== '/checkout.php'){
$(document).ajaxComplete(function(){
sessionStorage.setItem('totals', $('table.CartContents>tfoot').html());
});
}
</script>

expanding and collapsing table rows using angularjs ng-repeat -start and ng-repeat-end

i have one issue can anyone help me please...
i have a table in that table i have four users. and i have two icons(one is for expanding and another is for collapsing table rows data at time(all)) above table when i clicked on expand icon the data in table expanded and collapsed. so until this fine to me . now am going to expand particular row of table by clicking arrow(actually present in tr) it expanded particular row and collapsed that particular row. then this time if a clicked expand and collapse icons(expand all and collapse all). then expanding and collapsing are not working.
Here am using ng-repeat-start and ng-repeat-end.
<div class="comprehensiveINDiv" ng-show="visibleCarConferenceList">
<div class="top-bg-expand" >
<div class="col-md-5 color-blue">
<h1 class="main-heading1 ">Care Conference
<span class="expand-btns">
<a><i class="fa fa-compress color-blue" aria-hidden="true" ng-click="expanded = true"></i></a>
|
<a><i class="fa fa-expand" aria-hidden="true" ng-click="loadAllcareplans(); expanded = !expanded"></i></a>
</span>
</h1>
</div>
<div class="col-md-3 select-pan1 select-inner-pan1 careconfhed">
<label>Status: </label>
<select ng-model="filterOpt.opt"
ng-options="item.name for item in filterOpts.options"
ng-change="getCareConferenceList();resetPage();">
</select>
</div>
<div class="col-md-4 ">
<sm-range-picker-input class="margn0" fname="Range" label="Range"
form="test" ng-model="vm.rangeSelected" flex="100"
format="DD-MMM-YYYY" divider="To" week-start-day="Monday"
on-range-select="rangeSelected(range)"
ng-change="getCareConferenceList();">
</sm-range-picker-input>
</div>
</div>
<div ng-show="noConfData" class="margnL15">NO RECORDS FOUND</div>
<div>
<button type="button" class="btn btn-info btn-sm margnL15"
id="addnew_btn" ng-click="addNewconference();">ADD NEW</button>
</div>
<div ng-show="confGrid">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-data3 tablestyle" id="tbl1">
<thead>
<tr>
<th></th>
<th> Date / Time </th>
<th>Reason</th>
<th>Status </th>
<th>Action</th>
<!--<th>time</th>-->
</tr>
</thead>
<tbody>
<tr ng-show="noConfData"><td colspan="4" >NO RECORDS FOUND</td></tr>
<tr ng-repeat-start="careconf in residentCareConferenceList" class="md-table-content-row class_{{careconf.CareConferenceID}}">
<td><a ng-click="expanded = !expanded"><i class="fa fa-angle-right" aria-hidden="true"></i></a></td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.CareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.ReasonDescription}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.careconferencestatus.CareConferenceStatusDescription}}</td>
<td><span class="fa fa-pencil" ng-click="EditCareConference(careconf.CareConferenceID);$event.stopPropagation();"></span></td>
<!--<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.TotalTime}}</td>-->
</tr>
<tr ng-repeat-end ng-class="{'hide' : expanded}">
<td colspan="5" style="width: 100%; border:none !important; padding-left:20px;">
<div class="col-md-12 scrolldata">
<div class="col-md-12 ">
<div class="col-md-12 residance-data-text">
<p>Facility :{{careconf.facilitybase.FacilityName }}</p>
<p> Resident : {{currentResident.personbase.FullName}}</p>
<p> Admitted :{{currentResidentDetails.AdmitReAdmiDischDate | date:'dd/MM/yyyy hh:mm a'}}</p>
<p> Physician : {{residentprovider}}</p>
</div>
</div>
<div class="col-md-12" id="table">
<div class="col-md-12">
<!-- Table one -->
<p> Interdisciplinary team members involved in this Resident's Care Planning since last Care Conference ({{careconf.LastCareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}) :</p>
<div class="tablestyledit">
<table class="table">
<tr>
<th width="50%" class="bdr-table">Name </th>
<th width="50%" class="bdr-table">Credentials </th>
</tr>
<tr ng-repeat="teamMember in careconf.teamMembers">
<td class="bdr-table">{{teamMember.ParticipantName}}</td>
<td class="bdr-table">{{teamMember.ParticipantRole}}</td>
</tr>
</table>
</div>
<div class="col-md-12" style="padding-top:0px;">
<div class="row">
<div class="md-form">
<p style="margin:0px;">Care Conference Summary</p>
<div class="empty-text">{{careconf.CareConferenceSummary}}</div>
</div>
</div>
</div>
<!--- /Table one -->
<!-- Table two -->
<div class="col-md-12" style="padding:0px;">
<p style="margin:0px; padding-top:10px;">Care Conference Participants :</p>
<div class="tablestyledit">
<table class="table ">
<tr>
<th width="50%" class="bdr-table">IDT Participant Name</th>
<th width="25%" class="bdr-table">Credentials</th>
<th width="25%" class="bdr-table">In Person</th>
</tr>
<tr ng-repeat="participant in careconf.participants">
<td class="bdr-table">{{participant.ParticipantName}}</td>
<td class="bdr-table">{{participant.ParticipantRole}}</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="participant.IsInPerson" disabled>
</fieldset>
</td>
</tr>
</table>
</div>
</div>
<!--/ Table two -->
<!-- Table three -->
<div class="col-md-12" style="padding:0px;">
<p style="margin:0px; padding-top:10px;">Family/Resident Attendance : </p>
<div class="tablestyledit">
<table class="table table-data-sub ">
<tr>
<th class="bdr-table">Name of person Invited</th>
<th class="bdr-table">Relationship</th>
<th class="bdr-table">Attended</th>
<th class="bdr-table">In Person</th>
</tr>
<tr ng-repeat="familyMember in careconf.familyMembers">
<td class="bdr-table">{{familyMember.ParticipantName}}</td>
<td class="bdr-table">{{familyMember.Relationship}}</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="familyMember.HasAttended" disabled>
</fieldset>
</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="familyMember.IsInPerson" disabled>
</fieldset>
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-12" style="margin-left:-15px;margin-bottom:8px;">
<p> Care Conference Date : {{careconf.CareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}</p>
<p>Signed by:</p>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div flex layout="column" class="pagi-nation">
<div ng-show="confTotal > 1" flex layout="column">
<section layout="row" layout-padding="">
<div class="col-md-5 col-xs-12">Showing Page <strong>{{confPage}}</strong></div>
<div class="col-md-7 col-xs-12">
<cl-paging id="confPage" flex cl-pages="confTotal" , cl-steps="3" , cl-page-changed="loadConfPages.onPageChanged()" , cl-align="center center"
, cl-current-page="Paging.currentPage"></cl-paging>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-show="visibleCarConferenceAdd">
<div ng-include="'views/doctor/addCareConference.html'"></div>
</div>
</div>
and my controller code
$scope.loadAllcareplans = function () {
$scope.expanded = true;
}
and finally am so sorry for my stupid english. and check my functinality (expanded, $scope.loadAllcareplans() and icons at careconference foe expanding and collapsing all table data )
Check this fiddle
The content is not what you provided.
But the logic will be this
https://jsfiddle.net/athulnair/wkz5oq9z/
$scope.collapseAll = function() {
$scope.data.forEach(function(item) {
item.isCollapsed = false;
})
}
Rather than using the above ng-click function in the tag you could go with javascript and adding/removing classes dynamically.I have used ui-bootstrap and glyphicon. Follow the below code.
HTML:
<a data-toggle="collapse" data-target="#test"><i class="test_icon glyphicon glyphicon-collapse-down"></i><h4 class="header"> Test Class </h4></a>
JavaScript
$('#test').on('hidden.bs.collapse', function () {
$(".test_icon").removeClass("glyphicon-collapse-down").addClass("glyphicon-collapse-up");
});
$('#test').on('shown.bs.collapse', function () {
$(".test_icon").removeClass("glyphicon-collapse-up").addClass("glyphicon-collapse-down");
});