Angualarjs smart table search particular columns - angularjs

i have used this documentation smart table
<form>
<label for="predicate">selected predicate:</label>
<select class="form-control" id="predicate" ng-model="selectedPredicate" ng-options="predicate for predicate in predicates"></select>
</form>
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
<th>email</th>
</tr>
<tr>
<th>
<input st-search="{{firstName}},{{lastName}}" placeholder="search for firstname" class="input-sm form-control" type="search"/>
</th>
<th colspan="3">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
<th>
<input st-search="{{selectedPredicate}}" placeholder="bound predicate" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td>{{row.firstName | uppercase}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date}}</td>
<td>{{row.balance | currency}}</td>
<td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
</table>
i have used st-search search for particular column . it is working fine but two column not working. can you help me? i need search two column only

There is apparently no way to achieve this directly with the built smart-table.
You can use a directive like suggested here :
AngularJS smart-table search within multiple columns

I have another idea for others who have the same problem:
If your data rowCollection is not too big,
in the javascript in the init() of the page do something like:
self.rowCollection.forEach(function (element) {
element.NameForFilter = element.firstName+ ' ' + element.lastName;
});
and then in the input of the th:
st-search=NameForFilter

Related

How to check the rows of ng-repeat values in angular js

How to access the rows of ng-repeat of array of arrays?
in jsp:
I have one json array object which have content of table.
and another array object table header.
so below I used to implement it. But I have one situation that if col1 data is Y then I need to display one check box. How to check that..
<body ng-app="myApp" ng-controller="mainCtrl">
<div class="table-container">
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th lr-drag-src="headers" lr-drop-target="headers" ng-repeat="col in columns" st-sort="{{col}}">{{col}}</th>
</tr>
<tr>
<th>
<input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/>
</th>
<th colspan="4">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td ng-repeat="col in columns**>{{row[col]}}</**td>
</tr>
</tbody>
</table>
</div>
<div ng-show="isLoading" class="loading-indicator"></div>
</body>
Single array:
')" id = "checkExport" value = "{{result.TX_ID}}">
{{result.TX_ID}}
{{result.value2}}
You can use rowCollection[1].columns with foreach to find if some value in columns contains Y. But the better way just use ng-show="col === Y" as attribute to your checkbox. Or ng-hide if you need to hide it.

how to shows last index input value tag... ng-repeat

how to shows input value in last index in ng-repeat but its shows everyrow item... i want only last index user enter payment amount please anyone help me this highly appreciated
<table class="table display table-hover table-bordered product-overview mb-10" id="support_table">
<thead>
<tr class="bg-info">
<th class="col-md-4">Shirka Name</th>
<th class="col-md-1">Approvals</th>
<th class="col-md-2">CompanyRate</th>
<th class="col-md-1">Mofa Upload Date</th>
<th class="col-md-2">Payment</th>
<th class="col-md-1">Balance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in VisaPaymentList">
<td>{{item.ShirkaName}}</td>
<td>{{item.approvals}}</td>
<td>{{item.CompanyRate}}</td>
<td>{{item.DateField}}</td>
<td><input ng-change="BalanceMinus()"
ng-model="item.PaymentReceived" autocomplete="off"
id="payment" class="form-control input-height"
placeholder="Payment" type="text">
</td>
<td>{{item.Balance}}</td>
</tr>
</tbody>
</table>
Use the ng-if directive with the $last property of the ng-repeat item scope:
<tr ng-repeat="item in VisaPaymentList">
<td>{{item.ShirkaName}}</td>
<td>{{item.approvals}}</td>
<td>{{item.CompanyRate}}</td>
<td>{{item.DateField}}</td>
<td>
<̶i̶n̶p̶u̶t̶ ̶n̶g̶-̶c̶h̶a̶n̶g̶e̶=̶"̶B̶a̶l̶a̶n̶c̶e̶M̶i̶n̶u̶s̶(̶)̶"̶
<input ng-if="$last" ng-change="BalanceMinus()"
ng-model="item.PaymentReceived" autocomplete="off"
̶i̶d̶=̶"̶p̶a̶y̶m̶e̶n̶t̶"̶ ̶c̶l̶a̶s̶s̶=̶"̶f̶o̶r̶m̶-̶c̶o̶n̶t̶r̶o̶l̶ ̶i̶n̶p̶u̶t̶-̶h̶e̶i̶g̶h̶t̶"̶ ̶
name="payment" class="form-control input-height"
placeholder="Payment" type="text">
</td>
<td>{{item.Balance}}</td>
</tr>
When $last is true, the <input> element will be added. Otherwise the <td> element will be empty.
For more information, see
AngularJS ng-repeat Directive API Reference - Overview

Why cannot I add new list in a table in angularJS 1.x?

I have example code below where I am supposed to create a list of items.
<div ng-hide="listTrigger">
<!--FIRST TABLE-->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th sortable="code" class="sortable">
Product Name
</th>
<th sortable="placed" class="sortable">
Qty
</th>
<th class="st-sort-disable th-dropdown">
Price
</th>
<th sortable='total.value' class="sortable">
Split
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td width="40%">
<select class="form-control" ng-model="prod.uid">
<option selected disabled>Select Product</option>
<option ng-repeat="product in products | orderBy : 'name'" ng-value="product.uid" >{{product.name}}</option>
</select>
</td>
<td width="20%">
<input type="number" min="0" ng-model="prod.qty" class="form-control">
</td>
<td width="20%">
<input type="number" min="0" ng-model="prod.price" class="form-control">
</td>
<td width="10%">
<input type="number" min="1" max="100" ng-model="prod.split" class="form-control">
</td>
<td width="10%"><button ng-click="addNewProduct(prod.id)" class="form-control">Add</button></td>
</tr>
</tbody>
</table>
<!--SECOND TABLE-->
<table ng-show="newProducts.length!=0" class="table">
<thead>
<tr>
<th >
Product Name
</th>
<th >
Qty
</th>
<th >
Price
</th>
<th >
Split
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="newProduct in newProducts">
<td width="60%" ng-bind="newProduct.uid"></td>
<td width="10%" ng-bind="newProduct.qty"></td>
<td width="10%"ng-bind="newProduct.price"></td>
<td width="10%" ng-bind="newProduct.split"></td>
<td width="10%"><button ng-show="newProducts.length!=0" ng-click="removeProduct(newProduct.uid)">X</button></td>
</tr>
</tbody>
</table>
Output
but whatever i type in the textbox of first table is coming just like that in second table. It is supposed to come list by list
In JS I am getting all details from input fields and settinf to an object prod and then pushing it in to an array newProducts.
Later in the table I am using ng-repeat to repeat items in newProducts array. The top table and bottom table are connected in no other way and I cannot figure out why values are chaging in bottom table when they are changed in input fields. Also while trying to add it one more time, it throws an error.
jquery.js:4409 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.3/ngRepeat/dupes?p0=newProduct%20in%20newPr…0a-42d3-949e-3e8e59ac2be9%22%2C%22%24%24hashKey%22%3A%22object%3A359%22%7D
Here is the JS to add new item
//function to add new product while creating
$scope.addNewProduct= function(id){
$scope.newProducts.push($scope.prod);
console.log("product array-"+JSON.stringify( $scope.newProducts));
}
I tried console.log to log newProducts array in console, it is getting updated with new array , but not showing up in second table. Please help!
use angular copy.
angular $scopes are two way binded.. the changes u make in first table will be reflected in second table as you are pushing $scope.prod which is two way binded.
Using $scope can be very tricky. I'm not the best in Angular but i have no idea
$scope.newProducts.push($scope.prod);
if you are using here the $scope of the function or the $scope of the Controller.
Put in at the very top of your Controller "var vm=$scope", and in your html use "Controller as vm".
So if you are then there, we can see if the problem still exists.
Angular variables are reference type. So you can use angular.copy() to overcome from this issue. Below the code.
$scope.addNewProduct= function(id){
var products = angular.copy($scope.prod);
$scope.newProducts.push(products);
console.log("product array-"+JSON.stringify( $scope.newProducts));
}
Hope it will help you thanks.

How can data be filtered in a html table with filter in each column separately using Angular JS?

I want to use some text box in a dropdown or so beside each column header for text input for searching in that particular column as in for ID or Name.
<div>
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr ng-repeat="item in data">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
use filter like this
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<th>
<select ng-model="selectVal" >
<option value="id"> id</option>
<option value="name"> name</option>
</select>
</th>
<th><input ng-model="search[selectVal]" /></th>
</tr>
<tr ng-repeat="item in data | filter : search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.data = [{id:1,name:'sss'},{id:2,name:'aaa'}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<th>
<select ng-model="selectVal" >
<option value="id"> id</option>
<option value="name"> name</option>
</select>
</th>
<th><input ng-model="search[selectVal]" /></th>
</tr>
<tr ng-repeat="item in data | filter : search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
It's simple, you just have to add a input for each column, like this:
<table class="table">
<tbody>
<tr>
<th>
<p>ID</p>
<input ng-model="search.id" />
</th>
<th>
<p>Name</p>
<input ng-model="search.name" />
</th>
</tr>
<tr ng-repeat="item in data | filter:search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
Take a look in this example and this answer

Export only filtered data into csv in angular smart table

We have implemented a report table using angular smart table.When user applied search criteria using st-search , we need to export all items into csv.We have used ng-csv directive for exporting. When use st-table array collection, the only first page data is getting.That mean total 7 records after filtering and first page showing 5 items, only this data(5 items) is exported.How can export all filtered data?
<table class="table table-striped" st-table="displayed">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
<th >email</th>
</tr>
<tr>
<th>
<input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/>
</th>
<th colspan="4">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayed">
<td>{{row.firstName | uppercase}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date}}</td>
<td>{{row.balance | currency}}</td>
<td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="5" st-displayed-pages="10"></div>
</td>
</tr>
</tfoot>
You can have access to the filtered collection through the table controller api. So you just need to create a directive which requires the stTable controller:
.directive('stExport',function(){
return {
require:'^stTable',
link:function(scope, element, attr,ctrl){
element.bind('click',function(){
alert(ctrl.getFilteredCollection().length);
})
};
}
have a look at that running example

Resources