dirPagination numbers not change when ng-model search put something - angularjs

At first, I'm using dirPagination. The problem is that when I search something, it's filtered correctly, but pagination number not change and also show all last number in pagination without any change and I see some page is empty because it does filter but page number is show.
<div data-ng-controller='productsController'>
<form `class='form-inline'>
<div class='form-group'>
<label>search</label>
<input type='text' data-ng-model='search' class='form-control' placeholder='search' />
</div>
</form>
<table class='table table-striped'>
<thead>
<tr>
<th>#</th>
<th>product</th>
<th>imet</th>
</tr>
</thead>
<tbody>
<tr dir-paginate='product in products|itemsPerPage:12|filter:search|orderBy:sortKey:reverse'>
<td>{{product.id}}</td>
<td>{{product.productName}}</td>
<td>{{product.time}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size='10' direction-links='true' boundary-links='true' >
</dir-pagination-controls>
<script>
(function(){
var app = angular.module('products', ['angularUtils.directives.dirPagination']);
app.controller('productsController', function($scope, $http){
$scope.products = [];
$http.get('/products/json').success(function(data){
$scope.products= data;
});
});
})();
</script>
</div>

itemsPerPage must be the last filter, as below:
<tr dir-paginate='product in products | filter: search | orderBy: sortKey: reverse | itemsPerPage: 12'>
For more explanation, check it on FAQ on michaelbromley/angularUtils/.

Related

How to get correct uib-pagination total-items after filtering?

Hi I have a table which i want to filter based on days check boxes. After filtering i want to have correct pagination total items. Any ideas?
<div class="form-inline" id="overnightsDays">
<label translate="ratingCalculator.overnight.displayDays"></label>
<label ng-repeat="day in days">
<input type="checkbox" name="{{day.name}}" id="{{day.id}}" ng-model="day.checked" ng-init="selectedDays()" ng-change="selectedDays()">
<label class="overnights-display-rating margin-less" for="{{day.id}}" translate="ratingCalculator.overnight.{{day.name}}"> </label>
</label>
</div>
<div ng-if="vm.overnights.programs.length" id="overnightsTableData">
<table class="table table-bordered table-striped">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr ng-repeat="program in vm.tblOvernights.programs | filter: dayFilter">
</tr>
</tbody>
</table>
<ul uib-pagination total-items="How to get total items per each filtering" ng-model="vm.tblOvernights.currentPage" max-size="10" items-per-page="vm.tblOvernights.maxSize"
class="pagination-sm" boundary-link-numbers="true" force-ellipses="true" ng-click="vm.setTblOvernightsPage()"></ul>
</div>
i think you need a pipe filter to know to startfrom
.filter('startFrom', [
function() {
return function(data, start) {
return data.slice(start);
};
}
]);
and implement in the tr repeat like this
<tr ng-repeat="program in vm.tblOvernights.programs | filter: dayFilter |
startFrom:(vm.tblOvernights.currentPage -1) * vm.tblOvernights.pageSize | limitTo:
vm.tblOvernights.pageSize">
</tr>

No data when typing using bootstrap and angularJS

I am using typeahead to display all my cameraid and to search my data too but it does not giving me any data on the typeahead as it is showing me [object Object].
Anybody can help me with this?
my html file:
<div class="container-fluid">
<h1><a href="http://localhost:8081/"><span class="glyphicon glyphicon-home
">Image Viewer</span></a></h1>
</div>
<br>
<div ng-controller="Hello" class="col-xs-12">
<b>Search:</b><br>
<input type="text" ng-model="searchBox" uib-typeahead="state for state in records | filter:$viewValue | limitTo:8" class="form-control">
<table class="table table-striped table-hover" style="width:55%">
<thead>
<tr>
<th>CamID</th>
<th>Timestamp</th>
<th>View Image</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in records | filter:searchBox | orderBy:'+timestamp'">
<td>{{record.cameraid}}</td>
<td>{{record.timestamp}}</td>
<td>{{record.filename}}</td>
<td><button class="btn btn-primary" ng-click="toggleCustom()" onclick="myFunction()">View</button></td>
</tr>
</tbody>
</table>
My jsp file:
var camListApp = angular.module('camListApp', ['ui.bootstrap'])
camListApp.controller("Hello", ["$scope", "$http", function($scope, $http){
$scope.custom = true;
$scope.toggleCustom = function() {
$scope.custom = ! $scope.custom;
};
$http.get('http://localhost:8081/camera/list').then(function(response) {
console.log(response);
$scope.records= response.data;
});
}]);
My json data:
[{"id":23,"cameraid":"001","timestamp":"2016/06/15 17:27","filename":"452c5d867b563e937d44d48ebc326c7a"},
{"id":24,"cameraid":"000000006f4280af","timestamp":"2016/06/15 17:27","filename":"ee90428e4e0c19ba9858285398bf4fbb"},
{"id":25,"cameraid":"002","timestamp":"2016/06/15 17:28","filename":"c9a4fb339f6981ffd679937724167de8"},
{"id":26,"cameraid":"000000006f4280af","timestamp":"2016/06/15 17:28","filename":"a1df86417d958e670750cf8172a2b7dd"}
Actually you are returning all the objects that's why you get "object Object", you need to specify which part you gonna use.
uib-typeahead="state.cameraid as state.cameraid for state in records | filter:$viewValue | limitTo:8"
The first state.cameraid is what you display in the list the second is the value.

Submitting a dynamic form in angularjs

I'm trying to create a function where I build a column from an array that list products. Then a second column that contains a select list of options I want to pair the second column with.
The end result will be an ajax call to a server that will insert each matched pair.
I created an example on JS Fiddl: https://jsfiddle.net/wnzj6wda/2/
Here is the code:
<html>
<header>
<title>myTittle</title>
</header>
<body ng-app='myApp' ng-controller='myController'>
<div class="col-md-10 col-md-offset-1">
<div>
<form>
<table class="table table-striped">
<thead>
<th>From File</th>
<th>Map To</th>
</thead>
<tr class="selector-row" ng-repeat="(key,value) in List1">
<td><span id="myspan">{{value}}</span>
</td>
<td style="padding:10px;">
<select name="repeatSelect" id="repeatSelect" ng-model="data" class="form-control">
<option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button ng-click="SubmitMatched()">Show matched</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
<script>
var app = angular.module('myApp', [])
app.controller('myController', ['$scope', function($scope) {
$scope.List1 = ['product1', 'product2', 'product3', 'product4', 'product5'];
$scope.Match = ['match1', 'match2', 'match3', 'match4', 'match5'];
$scope.SubmitMatched = function() {
//I want to be able to submit results to be added to a database, where I can pass the coloms that match to the selected.
//Example:
// results = [{'product1':'match4','product2':'match5','product3':'match1','product4':'match3','product5':'match2'}]
}
}])
</script>
</html>
Here is the updated demo https://jsfiddle.net/wnzj6wda/3/
You have to make ng-model dynamic so that finally you will get that object with data as
in js
$scope.data ={};
in html
<select name="repeatSelect" id="repeatSelect" ng-model="data[value]" class="form-control">
<option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
</select>
Hope this will help you

How to add the object values into table using angularjs

var app = angular.module("myapp", ["ngSanitize"]);
app.controller("controller", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);
and html
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 ng-repeat='task in tasks'>
<tr>
<td>{{task.item}}</td>
<td>{{task.status}}</td>
</tr>
</table>
</div>
</div>
I tried as above but i could not able to attach header to the table.And at the place of Done I am tring to attach a checkbox...I mean if status is true the chexk box must be checked or else unchecked.
Output:
Item Done
Shopping checkbox with ticked
Cleaning checkbox without ticked
See documentation for checkbox input
Not exactly the answer, but why do you repeat table instead of rows?
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 >
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<tr ng-repeat='task in tasks'>
<td>{{task.item}}</td>
<td><input type="checkbox" ng-model="task.status"></td>
</tr>
</table>
</div>
</div>
But I don't see any sense in table in your case.
<span ng-repeat="task in tasks">
<input type="checkbox" ng-model="task.status"> {{task.item}}
</span>
That would be much cleaner.
Do changes as follows in the HTML.
<body ng-app="myapp" ng-controller="ListController">
<table border="1" ng-repeat='task in tasks'>
<tr>
<td>
{{task.item}}
</td>
<td>
<input type="checkbox" ng-model="task.status">
</td>
</tr>
</table>
</body>
Do changes in the Angular js as follows.
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);

Getting key value pairs from json reponse into angular js

How do I map the json response to the table in html page.
Angularjs Controller:
app.controller('tableController', function ($scope,$http)
{
$scope.customerTable = [];
$scope.getTable = function ()
{
$http.get('<%=request.getContextPath()%>/GetTable.do').success(function (data)
{
$scope.customerTable = data;
// console.log($scope.customerTable);
});
};
});
html code:
<div ng-controller="tableController">
<!--<p>Click <a ng-click="getTable()">here</a> to load data.</p>-->
<table>
<tr>
<th>Card Number</th>
<th>First Name</th>
<th>Opening Balance</th>
<th>Withdrawal</th>
<th>Deposit</th>
<th>Closing Balance</th>
<th>Tx Date</th>
<th>Usage_Type</th>
</tr>
<tr ng-repeat="data in customerTable ">
<td>{{data[0]}}</td>
</tr>
</table>
<br>
<button class="form-control btn btn-success" type="submit" ng-click="getTable()">Load Table Data</button>
</div>
The response is in one array with key, value pairs. Do I have to modify the ng-repeat?
Here is the json response:
[{"TXDATE":"1-Aug-14","FIRST_NAME":"MOSES","USAGE_TYPE":"HOTELS/MOTELS/RESORTS","WITHDRAWAL":"15200","DEPOSIT":"0","CARD_NUMBER":"AL98****66325","CLOSING_BAL":"-362764.96","OPENING_BALANCE":"0"}]
You can use the fields in every object:
<tr ng-repeat="data in customerTable ">
<th>{{data.FIRST_NAME}}</th>
<th>{{data.CARD_NUMBER}}</th>
...
</tr>
Perhaps you could use a directive for this kind of table related iterations.
Use the attributes. it should be:
<tr ng-repeat="data in customerTable ">
<td>{{data.TXDATE}}</td> <!-- result: 1-Aug-14 -->
</tr>
and so on.
Yes, you have to modify it.
<tr ng-repeat="data in customerTable ">
<td>{{data['CARD_NUMBER']}}</td>
<td>{{data['TXDATE']}}</td>
<td>{{data['OPENING_BALANCE']}}</td>
...
</tr>

Resources