No data when typing using bootstrap and angularJS - 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.

Related

Angularjs ng-repeat doesn't work as expected

I have an Angularjs controller(Angularjs 1.5.6) which calls a function from a python script, which returns an array of elements. I am trying to do an ng-repeat so that they appear in the table but for some reason, it doesn't show the elements of the array.
The 'Go' button in the html template triggers the function getSID which makes an HTTP call to a python script that returns an array. At the same time, the function also sets the scope, showval to true such that the table in the html appears only after the button is clicked.
<script>
angular.module('navigator', [])
.controller('HomeCtrl', function($scope, $http) {
$scope.getSid = function (sid) {
console.log(sid);
$http({
method: 'POST',
url: '/getMachine',
data: {sid:$scope.sid}
}).then(function(response) {
$scope.machines = [];
var object1 = response.data;
$scope.machines.push(object1);
//console.log(object1);
console.log($scope.machines);
$scope.showval = true;
}, function(error) {
console.log("hello");
console.log(error);
});
};
})
HTML code:
<div class="input-group mb-3 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">Enter the SID</span>
</div>
<input type="text" class="form-control" ng-model="sid">
<button type="button" class="btn btn-outline-secondary" ng-click="getSid(sid)" ng-model="show" >
GO!
</button>
</div>
<div ng-show="showval">
<table class="table table-dark" >
<thead>
<tr>
<th scope="col">SID</th>
<th scope="col">Cluster</th>
<th scope="col">Node</th>
<th scope="col">Physical ip</th>
<th scope="col">Logical ip</th>
<th scope="col">Logical Host</th>
<th scope="col">Physical Host</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in machines">
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
I googled ng-repeat and so several examples in plunker and I am following the same code but my code doesn't seem to work. Would be grateful for any assistance. Thanks for your time.
Your need to enclose track by $index within quotes as well,
<tr ng-repeat="item in machines track by $index">
Guilty of not posting the complete details. I was working with python flask and realized that the conflict is due to Jinja2.
I had to use the {%raw} {%end raw} so that Jinja2 processes it as an html.
More details in this Link
Now my code looks like this and ng-repeat is working.
{% raw %}
<tbody>
<tr ng-repeat="item in machines" >
<td>{{item}}</td>
</tr>
</tbody>
{% endraw %}

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>

dirPagination numbers not change when ng-model search put something

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/.

Filtering through table data using angularjs v1.3.15 ng-repeat

I want to filter through table data using angularjs ng-repeat. Currently there is no data in the table, however, a message should appear stating that the data was not found. The error I am getting is:
*Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)entryLimit | limitTo:entryLimit, Duplicate key: string: , Duplicate value:
HTML
<div ng-controller="SearchUsersCtrl">
<div class="panel panel-default clients-panel col-md-10 col-md-offset-1">
<div class="panel-body">
<span class="col-md-3">
<select ng-model="entryLimit" class="form-control input-sm search-limit">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</span>
<span class="col-md-9">
<input type="text" name="search" ng-model="search" ng-change="filter()" class="form-control search" placeholder="Search...">
</span>
</div>
<div ng-repeat="filter:search"></div>
<table class="table" ng-show="filteredItems > 0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<i class="fa fa-file-o fa-fw"></i> Upload Excel
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-9 col-md-offset-1 text-center" ng-show="filteredItems == 0">
<h4 style="color:red;">No Clients Found</h4>
</div>
<div class="col-md-9 col-md-offset-1 text-center" ng-show="filteredItems > 0">
<div pagination="" class="pagination-small" ng-model="currentPage" direction-links="true" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" maxSize="maxSize" previous-text="«" next-text="»"></div>
</div>
AngularJS
app.controller('SearchUsersCtrl', function($scope, $http, $timeout) {
$scope.loading = true;
$http({
method: 'GET',
url: '' //retrieved from...
}).success(function(data){
$scope.list = data;
$scope.currentPage = 1; //current page
$scope.entryLimit = 10; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
$scope.loading = false;
});
$scope.setPage = function(pageNo) {
return $scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
// sort items in list
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
$scope.maxSize = 5; //set number of pagination size
});
I'd listen to angular and use track by to avoid the duplicate keys error:
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) |
startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit track by $index">
Note that track by $index will display all duplications, so if you want to use your own tracking method - track by myTrackingFunction(n)
Or, if you have a unique identifier in your data objects, something like
track by data.identifier
Check out the docs.

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