How do I get all results where at least one property contains the parameter passed in the filter? (angullarjs) - angularjs

I am trying to convert my paginated table from individual columns to a search all columns that contain the result.
//Newly added input that I want to query all columns
<input type="text" ng-model="searchCriteria" />
<table ng-table="tableParams" class="table table-condensed" show-filter="true">
<tr ng-repeat="memberInfo in $data">
<td data-title="'Name'" filter="{ Name: 'text'}" sortable="'Name'">
{{memberInfo.Name}}
</td>
<td data-title="'Location'" filter="{ Location: 'text'}" sortable="'Location'" style="width: 275px;">
{{memberInfo.Location}}, {{memberInfo.country}}
</td>
<td data-title="'Phone'" >
{{memberInfo.Phone}}
</td>
<td data-title="''" style="width: 30px;">
<button type="button" class="btn btn-xs btn-info" title="View on map" ng-click="goToMarker(memberInfo.Key)">Map</button>
</td>
</tr>
</table>
Above you can see I have each column has it's own filter, but I want to remove them and have a single catch all.
I have added a screen shot below of a visual mockup
Thank you.
UPDATE
I got the filters to work, but not with the pagination...
<input type="text" class="form-control" placeholder="Search name, phone, or location" ng-model="queryFilter" />
<table ng-table="tableParams" class="table table-condensed" show-filter="true">
<tr ng-repeat="memberInfo in $data | filter:query">
<td data-title="'Name'" sortable="'Name'">
{{memberInfo.Name}}
</td>
<td data-title="'Location'" sortable="'Location'" style="width: 275px;">
{{memberInfo.Location}}, {{memberInfo.country}}
</td>
<td data-title="'Phone'" >
{{memberInfo.Phone}}
</td>
<td data-title="''" style="width: 30px;">
<button type="button" class="btn btn-xs btn-info" title="View on map" ng-click="goToMarker(memberInfo.Key)">Map</button>
</td>
</tr>
</table>
And in the controller I have added this method
$scope.query = function (memberInfo) {
return memberInfo.Name.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
|| memberInfo.Location.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
|| memberInfo.Phone.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
|| memberInfo.Country.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
;
};

Related

Search on bootstrap table with expanding rows

I have a bootstrap table with expanding rows. Each row can expand into multiple rows, and those can too expand in multiple rows (3 levels in total).
The search does find items on the 3rd level but it doesn't display them correctly.
This is an example code on codepen.
https://codepen.io/anon/pen/gGOOBz
My HTML code is:
<table st-table="displayedCollection" st-safe-src="domains" class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th st-sort="name">Domains</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="Search ..." type="text" /></th>
</tr>
</thead>
<tbody ng-cloak>
<tr ng-repeat-start="row in displayedCollection">
<td id="package1-{{$index}}" class="accordion-toggle data-exists cursor-pointer" data-toggle="collapse" data-parent="#OrderPackages-{{$index}}" data-target=".packageDetails1-{{$index}}">{{row.name}}
</td>
</tr>
<tr ng-repeat-end>
<td id="package2-{{$index}}" colspan="3">
<div class="accordion-body collapse packageDetails1-{{$index}} + 1">
<table st-table="beansCollection" st-safe-src="types" class="table table-condensed" style="border-collapse:collapse;">
<!--<thead>
<tr>
<th st-sort="name">Types</th>
</tr>
</thead>-->
<tbody>
<tr ng-repeat-start="beanType in row.beans">
<td id="type1-{{$index}}" class="accordion-toggle" data-toggle="collapse" data-parent="#typePackages-{{$index}}" data-target=".typesDetails1-{{$index}}">
{{beanType.name}}
</td>
<td align="right">
<button ng-click="getBeanName(beanType.name, null, beanType)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default" ng-if="showButton(beanType.beans)">
Display
</button>
</td>
</tr>
<!---->
<tr ng-repeat-end ng-visible="false">
<td id="typeId2-{{$index}}" colspan="3">
<div class="accordion-body collapse typesDetails1-{{$index}} + 1">
<table class="table table-condensed">
<tbody>
<tr ng-repeat="leafBean in beanType.beans">
<td>
{{leafBean.name}}
</td>
<td align="right">
<button ng-click="getBeanName(beanType.name, leafBean.name, leafBean)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default">Display</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
I want that when I search something under a certain row it would be displayed with the row above already expanded.
PHOTO:
Say I want to search for TBLEXCHANGEMEMBERSHIPS which is on the 3rd level.
When I input it into the search bar, it finds it but doesn't display it correctly.
What should I do?

nested ng-tables with common filtering and sorting

I am trying to found how i can have a table with nested table or second level data. With ng-repeat-start i create the desired ui result but i can't do sorting and filtering in nested data
html code is :
<table ng-table="list.tableParams"
class="table table-condensed table-bordered table-striped">
<tr ng-repeat-start="row in $data">
<td data-title="'Name'" sortable="'name'" filter="{name: 'text'}">
<span ng-if="row.data.length > 0" class="glyphicon"
ng-class="{ 'glyphicon-chevron-right': !row.hideRows, 'glyphicon-chevron-down': row.hideRows }"
ng-click="row.hideRows=!row.hideRows"></span> {{row.name}}
</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
<td data-title="'Country'" filter="{ country: 'select'}"
filter-data="list.countries">{{row.country}}</td>
</tr>
<tr ng-hide="!row.hideRows" ng-repeat="sub in row.data">
<td style="padding-left: 50px" filter="{name: 'text'}">{{sub.name}}<br />
<td>{{sub.age}} members</td>
<td>{{sub.money}}</td>
<td>{{row.country}}</td>
</tr>
<tr ng-repeat-end></tr>
and my data and table params are :
vm.simpleList =[{"name":"Karen","age":45,"money":798,"country":"Czech Republic",
data:[{"name":"lala","age":59,"money":523,"country":"American Samoa"},
{"name":"aaa","age":56,"money":540,"country":"Canada"},
{"name":"Cat","age":57,"money":746,"country":"China"},
{"name":"Christian","age":59,"money":572,"country":"Canada"},
{"name":"Tony","age":60,"money":649,"country":"Japan"},
{"name":"Cat","age":47,"money":675,"country":"Denmark"}]},
{"name":"Cat","age":49,"money":749,"country":"Czech Republic"},
{"name":"Bismark","age":48,"money":672,"country":"Denmark"},
{"name":"Markus","age":41,"money":695,"country":"Costa Rica"},
{"name":"Anthony","age":45,"money":559,"country":"Japan"},
{"name":"Alex","age":55,"money":645,"country":"Czech Republic"},
{"name":"Stephane","age":57,"money":662,"country":"Japan"},
{"name":"Alex","age":59,"money":523,"country":"American Samoa"},
{"name":"Tony","age":56,"money":540,"country":"Canada"},
{"name":"Cat","age":57,"money":746,"country":"China"},
{"name":"Christian","age":59,"money":572,"country":"Canada"},
{"name":"Tony","age":60,"money":649,"country":"Japan"},
{"name":"Cat","age":47,"money":675,"country":"Denmark"},
{"name":"Stephane","age":50,"money":674,"country":"China"},
{"name":"Markus","age":40,"money":549,"country":"Portugal"},
{"name":"Anthony","age":53,"money":660,"country":"Bahamas"},
{"name":"Stephane","age":54,"money":549,"country":"China"},
{"name":"Karen","age":50,"money":611,"country":"American Samoa"},
{"name":"Therese","age":53,"money":754,"country":"China"},
{"name":"Bismark","age":49,"money":791,"country":"Canada"},
{"name":"Daraek","age":56,"money":640,"country":"Costa Rica"},
{"name":"Tony","age":43,"money":674,"country":"Canada"},
{"name":"Karen","age":47,"money":700,"country":"Portugal"},
{"name":"lala","age":0,"money":0,"country":null}];
vm.tableParams = new NgTableParams({
sorting: {name: "asc"},
count: 5
}, {
counts: [],
dataset: vm.simpleList
});
I can't found anywhere an example or a way to do that. If i have nested tables like this :
<table ng-table="list.tableParams">
<tr ng-repeat-start="row in $data">
<!-- td's -->
<td data-title="'Name'" sortable="'name'" filter="{name, data.name: 'text'}">
<span ng-if="row.data.length > 0" class="glyphicon"
ng-class="{ 'glyphicon-chevron-right': !row.hideRows, 'glyphicon-chevron-down': row.hideRows }"
ng-click="list.createNestedTable(row)"></span> {{row.name}}
</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
<td data-title="'Country'" filter="{country: 'select'}"
filter-data="list.countries">{{row.country}}</td>
</tr>
<tr ng-repeat-end ng-hide="!row.hideRows" >
<td>
<table ng-table="list.tableParams2">
<tr ng-repeat="sub in $data">
<td style="padding-left: 50px" filter="{name: 'text'}" sortable="'name'">{{sub.name}}<br />
<td filter="{age: 'number'}" sortable="'age'">{{sub.age}}</td>
<td filter="{money: 'number'}" sortable="'money'">{{sub.money}}</td>
<td filter="{country: 'select'}" sortable="'country'">{{row.country}}</td>
</tr>
</table>
</td>
</tr>
</table>
How can i make filtering in both columns name and data.name (nested data) from the common external filtering? Something like that : filter="{name, data.name: 'text'}"

Update row in Angular JS

I am submiting a form using Angular JS and Web service. Here is code-
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="EmpName" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="EmpAge" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="EmpCity" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
I want to make these text boxes reusable on Edit i.e. on edit click corresponding rows item must be filled and the Save button should now be working like Update button.
How can I do it?
Alternatively How can I make row editable?
Ideally you would wanna create the models as
Employee.Name , Employee.Age , Employee.City
Now
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="Employee.Name" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="Employee.Age" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="Employee.City" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="button" id="btnSubmit" ng-click="saveEmployee()">{{Employee.id ? "Edit" : "Create"}}</button>
</td>
</tr>
</table>
In the Controller
$scope.saveEmployee = function(){
if($scope.Employee.id){
// Id will be present for a existing employee
// update the Employee
}else {
// Id not present
// create the employee
}
}
I would have an Employee.save() in the model which can identify weather to save or update the Employee

First matching element using CSSSelector

So, I am trying to get the test of the column Title or Names or DateTime
I'm trying to get the test td element and I have tried the following using CSSSelector:
div#body-inner div#ctl00_ContentPlaceHolder1_Control1_pnlList div table#ctl00_ContentPlaceHolder1_Control1_gv.gv tbody tr.item td:nth-child(4)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head id="ctl00_PageHead">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Employee</title>
<body id="ctl00_PageBody">
<form name="aspnetForm">
<div>
</div>
<div>
</div>
<table class="global-table" cellpadding="0" cellspacing="0">
<tr class="body">
<td>
<div id="body">
<div id="body-inner">
<h1>
Employee Information</h1>
<div id="ctl00_ContentPlaceHolder1_Control1_pnlList" style="width: 100%;">
<div class='filter'>
</div>
<div>
<table class="gv" cellspacing="0" border="0" id="ctl00_ContentPlaceHolder1_Control1_gv" style="border-collapse: collapse;">
<tr class="header">
<th class=" nolink" scope="col">
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Phone')">
Phone</a>
</th>
<th class=" sorted-desc" scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Title')">
Title</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$SubTitle')">
SubTitle</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Names')">
Names</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Names')">
Enames</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Active')">
Active</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$DateTime')">
DateTime</a>
</th>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$0')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
8/23/2011
</td>
</tr>
<tr class="altItem">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$1')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test1
</td>
<td>
1
</td>
<td>
Employee
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2014
</td>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$2')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test2</td>
<td>
111
</td>
<td>
Employer
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2013
</td>
</tr>
<tr class="altItem">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$3')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test3</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
8/23/2011
</td>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$4')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test4</td>
<td>
2
</td>
<td>
Employer
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2012
</td>
</tr>
<tr class="altItem">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$5')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test5</td>
<td>
3
</td>
<td>
Employer
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2012
</td>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$6')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test6
</td>
<td>
a
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
7/20/2012
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="footer">
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
the result I am getting is all the matching elements but how can I get only the td which is test?
<td >
test
</td>
<td >
DEMO TEST OCT 25
</td>
<td class="firefinder-match">
DEMO TEST OCT 25
</td>
<td >
DEMO TEST OCT 25
</td>
<td >
DEMO TEST OCT 25
</td>
<td >
DEMO TEST OCT 25
</td>
The issue lies with tr.item. There are multiple rows with that class and you are selecting all of them. Be more specific by using the first-child pseudo class so it will only select the first tr.item and not all of them.
Here is how I able to get:
table#ctl00_ContentPlaceHolder1_Control1_gv.gv tbody tr.item:nth-child(3) > td:nth-of-type(3)

Override EXTJS Button HTML

When I generate an EXT.Button, there resulting HTML looks like this:
<table id="ext-comp-1015" cellspacing="0" class="x-btn x-btn-text-icon right-toolbar-top-link x-btn-icon">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<td class="x-btn-tl"><i> </i></td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-ml"><i> </i></td>
<td class="x-btn-mc">
<em class="" unselectable="on">
<button type="button" id="ext-gen93" class=" x-btn-text"> </button>
</em>
</td>
<td class="x-btn-mr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-bl"><i> </i></td>
<td class="x-btn-bc"></td>
<td class="x-btn-br"><i> </i></td>
</tr>
</tbody>
</table>
How can I create and pass a template into the button to have it output simply a "button" tag? I am using EXT.js 3.2.1
Thanks,
Jamie
You can get around it by using an Ext.Panel..
new Ext.Panel({
renderTo: 'id-of-element',
html: '<button onclick="alert(\'I was clicked\');">Click Me</button>',
border: false
});

Resources