I am trying to switch my pages over to server side pagination.
We however have a global search and a header search
I need to capture the header, not sure how to capture these collectively, individually yes, but not collectively
<tr>
<th class="searchHeader" ></th>
<th *ngFor="let col of columns" class="searchHeader" >
<input class="fill-width" pInputText type="text" placeholder="Filter" [title]="'Type to filter ' + col.header"
(input)="table.filter($event.target.value.trim(), this.changeColumnField(col.field), 'contains',this)">
</th>
</tr>
Related
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.
I'm sorry if this is a basic question but I'm new to coding and really uncertain of how to proceed.
I'm currently using smart table and angularJS. I have a table with 10 rows per page and multiple pages, and I'd like for my index to
1. Reset each time I sort by a different filter (column).
2. Continue across pages within the same table.
I've tried using {{item.id}} and {{tableData.indexOf(item)}}, and they succeed in ensuring continuity (Eg; page 1 is index 1-10, page 2 11-20 and so on), but when I sort by a different filter (using st-sort), the index does not reset, and I'm stuck with my first row on page one with an id of 912, for example.
I have also explored {{$index}}, but it starts afresh on each page, and does not have continuity across pages.
I've considered trying to do a {{index + currentPage *10}}, but my currentPage is blank and I am uncertain/unaware of how to get it. The only scope that gets pushed through from my controller to my view is my tableData.
<!--View-->
<table class="table st-table" st-table="tableName" st-safe-src="tableData">
<thead>
<tr class="sortable ">
<th class="table-id" st-sort="id" st-sort-default="true">#</th>
<th st-sort="colA">colA</th>
<th st-sort="colB">colB</th>
<th st-sort="colC">colC</th>
<th st-sort=""></th>
</tr>
<tr class="st-filters">
<th></th>
<th><input st-search="colA" placeholder="Search colA" class="input-sm form-control search-input" type="search"/></th>
<th><input st-search="colB" placeholder="Search colB" class="input-sm form-control search-input" type="search"/></th>
<th><input st-search="colC" placeholder="Search colC" class="input-sm form-control search-input" type="search"/></th>
</tr>
<tr ng-repeat="item in tableName">
<td class="table-id">{{$index}}</td>
<td>{{item.colA}}</td>
<td>{{item.colB}}</td>
<td>{{item.colC}}</td>
</tr>
<tr>
<td colspan="6" class="text-center">
<div st-pagination="" st-items-by-page="10" st-displayed-pages="5"></div>
</td>
</tr>
</table>
I am calling an API wich will return a json object. Based on some conditions I am getting values from this Json object and displaying them in a table which can be repeated using angular JS. Now I need to get data of each table but I don't know how as some data is filtered. Below is the table:
<table class="table">
<thead>
<tr>
<th>Relation
</th>
<th>Date Of Birth
</th>
<th >In Hospital
</th>
<th >AMB & PM
</th>
<th > Total
</th>
</tr>
</thead>
<tr ng-repeat="member in CalculatorResponse">
<td>
{{member.Relation}}
</td>
<td>{{member.dateOfBirth}}
</td>
<td>
<span ng-repeat=" InHosp in member.InHospital | filter:{strClassName: class.className}">
{{InHosp.intClassValue}}
</span>
</td>
<td >
<span ng-repeat=" OutHosp in member.OutHospital | filter:{OptionType: Option_Select.type}">
<span ng-model="AMBPMVal" ng-repeat=" Benefits in OutHosp.Benefits | filter:{intExcess: CoBenefitsSelect.type}">
{{Benefits.intAMBPM}}
</span>
</span>
</td>
<td> Total value (unable to calculate it) {{InHosp.intClassValue}} + {{Benefits.intAMBPM}}
</td>
</tr>
</table>
<input type="button" value="Generate" ng-click="Generate()"/>
So the main problem is that I am trying to get all values of the table when generate button is clicked, but I cannot get the filtered values;
I did this but it is not working:
<span ng-repeat=" OutHosp in (filteredHosp = (member.OutHospital | filter:{OptionType: Option_Select.type}))">
<span ng-repeat=" Benefits in (filteredBenefits = (OutHosp.Benefits | filter:{intExcess: CoBenefitsSelect.type}))"> {{Benefits.intAMBPM}} </span>
<%--{{filteredBenefits[0].intAMBPM}}--%> </span> <%--{{filteredHosp[0].Benefits}}--%>
--> filtered benefits and filteredHosp can be only accessed in the commented region, if you put them outside the 2 spans you will get nothing.
I am also trying also to calculate the total of In Hospital and AMB&M but I cannot as I don't know how to get their values after filter.
Any suggestion?
They are not available, not because of filter but because they are outside the scope of ng-repeat. You can either do your calculations inside ng-repeat or iterate through your list and do calculations in your controller.
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.
hi all i am using angularjs Mean Stack . now i bind the data in html table using ng-repeat it's work's nice and i have add one functionality name is called filter option but its not woking because i stored id values into db but when i bind show the values related to that id now in db there is id and show related values now filter working based on that id only not filtered by showing text i need filter by showing values
Thanks Help
code
<table class="table table-striped table-bordered table-list" >
<thead>
<tr>
<th style="width: 25%" align="center">
Name
</th>
<th style="width: 30% " align="center">
IsActive?
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="RoleNameID" ng-model="Manage_Role1.RoleName" placeholder="search" class="searchbox" />
</td>
</tr>
<tr dir-paginate="Manage_Role in Manage_Roleser | itemsPerPage:8 | filter:Manage_Role1 | orderBy:orderByField:reverseSort " ng-class-odd="'odd'">
<td >
<span e-ng-change="applyHighlight($data)" editable-text="Manage_Role.RoleName" ng-attr-title="{{Manage_Role.RoleName}}"e-form="rowform" >
{{ Manage_Role.RoleName || 'empty' }}
</span>
</td>
</span>
</tr>
</tbody>
</div>
</table>
Here i stored the role id into db but i will show name based that id it's wokring fine but filter woking based id i want filter based displayed values