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
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 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.
I am trying to do something similar to what this question is doing, getting the length and totals of my filtered results.
HTML:
<div ng-app="app" ng-controller="controller">
<div class="col-md-4 ">Filter: <input class="form-control" ng-model="dataFilter" placeholder="filter" /></div>
<div class="col-md-4 ">Total: {{filtered.length}}</div>
<table class="table table-hover" ts-wrapper>
<thead>
<tr>
<th ts-criteria="policy.policy_number | parseInt">
Policy
</th>
<th ts-criteria="sales_rep.name">
Sales Rep
</th>
<th ts-criteria="policy.customer.full_name">
Customer
</th>
<th ts-criteria="type">
Type
</th>
<th ts-criteria="change_amt | parseFloat">
Change Amount
</th>
<th ts-criteria="effective_date | date">
Effective Date {{filtered.length}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="transaction in filtered = (data | filter: dataFilter )" ts-repeat>
<td>{{transaction.policy.policy_number}}{{pizza}}</td>
<td>{{transaction.sales_rep.name}}</td>
<td>{{transaction.policy.customer.full_name}}</td>
<td>{{transaction.transaction_type}}</td>
<td>${{transaction.change_amt | number:currency}}</td>
<td>{{transaction.effective_date | date}}</td>
</tr>
</tbody>
</table>
</div>
The JS really has nothing specific to this. In the above example {{filtered}} displays the filtered results as expected only when within the table (in the <th> in this case). When I try to get the length up above in the div, it returns nothing.
Is some kind of isolated scope being created here? My code appears to match the example the SO question had that I linked above so how come they can access that variable in other elements and I cannot?
I am getting the data for customers and displaying in on table (ng-repeat) on the main page. The main page also has search option which filter the data by a particular customer ID.
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
</tr>
</table>
The result I want to reach is that when a user clicks on the customer ID (which is one of the rows on the table displayed), a new view should open, where more details about that particular customer can be seen. I know basics of routing, but I can not get the best way to solve this problem, as there are many customers!
How can I give each customer ID, a different view that shows detail of that customer? What tools does Angular have for that? Just need a rough idea how to approach this problem using AngularJS!
Well you could either redirect user to a 'show' page like so:
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
<th></th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
<td><a ng-click="viewCustomer(data.kvk)" class="btn btn-xs btn-success"><span class="glyphicon glyphicon-search"></span></a></td>
</tr>
</table>
then in your controller:
$scope.viewClient = function(id) {
//path to your view using id
};
or else create a hidden table in the same view and show upon button click. I am using bootstrap accordion for sample purposes.
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
<th></th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
<td><a data-toggle="collapse" data-target="#{{data.kvk}}"></a> </td>
</tr>
<tr>
<td>
<div class="accordion-body collapse" id="{{data.kvk}}">
<!-- your content here -->
</div>
</td>
</table>
hope it helps.