I have used ngInfiniteScroll but i have a small problem, i have a set of data in a variable items for eg) 20 but i want to show 5 on first view and the remaining on sliding. but my code loads all the 20 at the first view how can i achieve this, i have given my code below
and my data structure
{
"data": [ {
"name": "Hoarding Majestic",
"code": 456,
"image": "assets/images/images/hoarding1.jpg",
"location": "Majestic"
},
{
"name": "BusShelter ForumMall",
"code": 452,
"image": "assets/images/images/hoarding2.jpg",
"location": "Whitefield"
},
{
"name": "Digital Vijayanagar",
"code": 458,
"image": "assets/images/images/hoarding3.jpg",
"location": "Vijayanagar"
},
{
"name": "Digital Vijayanagar",
"code": 458,
"image": "assets/images/images/hoarding3.jpg",
"location": "Vijayanagar"
}
]
}
html:-
<div layout="row" layout-align="space-around" layout-padding infinite-scroll='loadMore()' infinite-scroll-distance='2'
infinite-scroll-disabled='{{busyLoadingData}}' infinite-scroll-container = "'#content'">
<table class="simple">
<thead>
<tr>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Asset</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Location</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="assets in items">
<!--| priceRange:slider:lower:upper-->
<td>{{assets.name}}</td>
<td>{{ assets.location }}</td>
</tr>
</tbody>
</table>
</div>
and my controller:-
$scope.data = booking.data;
$scope.busyLoadingData = false;
$scope.items = [];
$scope.loadMore = function() {
//console.log("asdfasdfasd");
if($scope.busyLoadingData)
return;
$scope.busyLoadingData = true;
var last = $scope.data[$scope.data.length - 1];
for(var i = 0 ; i <= 5; i++) {
$scope.items.push($scope.data[i]);
//console.log(last);
}
$timeout(function(){$scope.busyLoadingData = false; }, 3000 );
};
Like any infinite scrolling element should do, ng-infinite-scroll is loading more data, than it can display at once. This is to prevent having to less data and having the user reach the bottom even if there is some data left. You can clearly see the effect in this demo. It will start loading data, even if there is still some space left to the bottom of the page.
Related
I'm obtaining a response in json format from laravel application like below:
[{"id":11,"name":"test","description":"adddas","isDone":false,"created_at":{"date":"2017-09-06 12:23:23.000000","timezone_type":3,"timezone":"UTC"}},{"id":12,"name":"test2","description":"asdasdsa","isDone":false,"created_at":{"date":"2017-09-13 06:23:22.000000","timezone_type":3,"timezone":"UTC"}},{"id":13,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 18:44:57.000000","timezone_type":3,"timezone":"UTC"}},{"id":14,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 20:23:58.000000","timezone_type":3,"timezone":"UTC"}},{"id":15,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 20:45:35.000000","timezone_type":3,"timezone":"UTC"}}]
I'm trying to format these data in Angular js in ng-repeat directive in way like below:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>name</th>
<th>Created at</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks">
<td>{{task.name}}</td>
<td>{{ task.created_at.date | date:'yyyy-MM-dd HH:mm:ss' }}</td>
</tr>
</tbody>
</table>
</div>
The problem is with format data. I'd like to format this as we can see above in format date:yyyy-MM-dd HH:mm:ss. The result is a table with incorrect dates:
How could I reduces .000000 in for example 2017-09-06 12:23:23.000000? The filter does not work at all. I don't know why. I would be greateful for help.
I'm obtaining data from database by Doctrine query in way like this:
public function getTasks(){
$results = $this->entityManager->createQueryBuilder()
->select('t')->from('\TodoList\Http\Entities\Task', 't')
->getQuery()->getArrayResult();
true);
return $results;
}
add this function to your controller
$scope.ToDate=function(date) {
return new Date(date);
}
and change your view like code below
<tr ng-repeat="task in tasks">
<td>{{task.name}}</td>
<td>
{{ ToDate(task.created_at.date) | date:'yyyy-MM-dd HH:mm:ss' }}
</td>
</tr>
Pass date as "date": "2017-09-06T12:23:23.000000" instead of "date":"2017-09-06 12:23:23.000000"
Check below code:
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
$scope.title = 'Hello world';
$scope.tasks = [{
"id": 11,
"name": "test",
"description": "adddas",
"isDone": false,
"created_at": {
"date": "2017-09-06T12:23:23.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 12,
"name": "test2",
"description": "asdasdsa",
"isDone": false,
"created_at": {
"date": "2017-09-13T06:23:22.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 13,
"name": "task12321",
"description": "jakis tam testowy task",
"isDone": false,
"created_at": {
"date": "2017-09-03T18:44:57.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 14,
"name": "task12321",
"description": "jakis tam testowy task",
"isDone": false,
"created_at": {
"date": "2017-09-03T20:23:58.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 15,
"name": "task12321",
"description": "jakis tam testowy task",
"isDone": false,
"created_at": {
"date": "2017-09-03T20:45:35.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}];
}]);
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div>{{title}}</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>name</th>
<th>Created at</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks">
<td>{{task.name}}</td>
<td>{{ task.created_at.date | date : "yyyy-MM-dd h:mm:ss"}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I have a 2d array which has data something like this,
categoryinfo[0][0] = {"name": "apple", "category": { "name": "fruits","id": "09a8597d"}}
categoryinfo[0][1] = {"name": "orange", "category": { "name": "fruits","id": "09a8697d"}}
categoryinfo[1][0] = {"name": "fish", "category": { "name": "meat","id": "09a8447d"}}
I want to display these data according to the category, As you can see the [0]the index has all the fruit items and the [1]index has all the meat items.
I want to display these as,
Fruits
Apple
Orange
meat
fish
<table>
<thead>
<tr>
<th>{{categoryinfo[0][0].category.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="formnames in categoryinfo">
<td>{{formnames[0].name}}</td>
</tr>
<tr ng-repeat="formnames in categoryinfo">
<td>{{formnames[1].name}}</td>
</tr>
</tbody>
</table>
to be more specific something like this above. But I cant figure out how to do this dynamically without hardcoding like this.
2D arrays are just arrays in an array, just loop over them layer by layer will do.
<table>
<thead ng-repeat-start="category in categoryinfo">
<tr>
<th>{{category[0].category.name}}</th>
</tr>
</thead>
<tbody ng-repeat-end>
<tr ng-repeat="item in category">
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
You repeat them using $index.
The first iteration iterates over y(vertical) and then the one inside gives you x(horizontal) values.
Have a look at the code below.
var app = angular.module('repeatSamples', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.categoryinfo = [];
$scope.categoryinfo[0] = []
$scope.categoryinfo[0][0] = {
"name": "apple",
"category": {
"name": "fruits",
"id": "09a8597d"
}
}
$scope.categoryinfo[0][1] = {
"name": "orange",
"category": {
"name": "fruits",
"id": "09a8697d"
}
}
$scope.categoryinfo[1] = []
$scope.categoryinfo[1][0] = {
"name": "fish",
"category": {
"name": "meat",
"id": "09a8447d"
}
}
$scope.categoryinfo[1][1] = {
"name": "mutton",
"category": {
"name": "meat",
"id": "09a8447d"
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<body ng-app="repeatSamples" ng-controller="MainCtrl">
<table class="table-bordered" ng-repeat="category in categoryinfo">
<thead>
<tr>
<th>{{category[$index].category.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="formnames in categoryinfo[$index]">
<td>{{formnames.name}}</td>
</tr>
</tbody>
</table>
</body>
As Commented,
I guess this should do it, though not tried <div ng-repeat="c in category"><h3>{{c[0].category.name}} <p ng-repeat="list in c">{{list.name}}</h3>
Idea:
Since you have 2-D array, you will have to use 2 loops. One to iterate over parent list and other to loop over child list.
Also since you have already grouped items based on category, you can access first element for title.
If the data structure is not fixed and you can change it, you can look into creating a hashmap. You would still need 2 loops but that might make it easier to retrieve data.
function MainCtrl($scope) {
$scope.categoryInfo = {
fruits: [
{"name": "apple","id": "09a8597d"},
{"name": "orange", "id": "09a8697d"}
],
meat: [
{"name": "fish", "id": "09a8447d"}
]
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<body ng-app ng-controller="MainCtrl">
<div ng-repeat="(key, value) in categoryInfo">
<h3>{{key}} </h3>
<p ng-repeat="list in value">{{list.name}}</p>
</div>
</body>
Sample code:
function MainCtrl($scope) {
var categoryInfo = [[],[]]
categoryInfo[0][0] = {"name": "apple", "category": { "name": "fruits","id": "09a8597d"}}
categoryInfo[0][1] = {"name": "orange", "category": { "name": "fruits","id": "09a8697d"}}
categoryInfo[1][0] = {"name": "fish", "category": { "name": "meat","id": "09a8447d"}}
$scope.categoryInfo = categoryInfo;
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<body ng-app ng-controller="MainCtrl">
<div ng-repeat="c in categoryInfo">
<h3>{{c[0].category.name}} </h3>
<p ng-repeat="list in c">{{list.name}}</p>
</div>
</body>
I have a table with following data formed by response from backend . I need to give pagination dynamically and fetch first 10 records initially and when particular page is triggered need to set accordingly. I am using dirpaginate.js for pagination purpose. But I couldnt get the datas accordingly.
Html:
<table>
<tbody>
<tr dir-paginate="item in searchData|orderBy:sortkey:reverse|itemsPerPage:10">
<td class="col-sm-4">{{item[0].profileInfo.firstname}}
<br> {{item[0].profileInfo.lastname}}
<br>
</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true">
</dir-pagination-controls>
JS:
var req = {
"request": {
"service": {
"servicetype": "3",
"sort": {
"sortby": "firstname",
"sorttype": "asc"
},
"records": {
"start_no": $scope.pagination,
}
}
}
}
$scope.sortkey = '';
$scope.reverse = false;
My doubt is simple. How to replace , with line break in angular filter. i also added the demo jsfFiddle
angular
.module('myApp', [])
.filter('nicelist', function() {
return function(input) {
if (input instanceof Array) {
return input.join(",");
}
return input;
}
})
.controller('ctrl', function($scope) {
$scope.todolists = [{
"id": "id_584",
"customer_id": 2,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_122",
"customer_id": 3,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_128",
"customer_id": 4,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_805",
"customer_id": 5,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_588",
"customer_id": 6,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": ["id_115"," id_114"],
"customer_id": 7,
"url": "url",
"bill_number": "123",
"location": "from_location"
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
<table class="table table-hover tr-table transactions" style="width: 100%;">
<thead>
<tr class="search-row pending-orders table-header-row-height tr-table-head">
<th>ID</th>
<th>Bill Number</th>
<th>Location</th>
<th>Url</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="todolist in todolists">
<td>{{todolist.id | nicelist }}</td>
<td>{{todolist.bill_number}}</td>
<td>{{todolist.location}}</td>
<td><a target="_blank" href="{{ 'http://' + todolist.url}}">Download Invoice : <i title="Download Invoice" style="padding-left:5px;cursor:pointer;color:black;" class="fa fa-download"></i></a> </td>
</tr>
</tbody>
</table>
</body>
demo
In the above link, there will be table. In ID column last row contain 2 values which is present in array inside the json. Now instead of comma(,) is there any possible way for line break.
Please share your knowledge.
you use ng-bind-html with injecting sanitize at module level .
html:
<tbody>
<tr ng-repeat="todolist in todolists">
<td ng-bind-html="todolist.id | nicelist"></td>
<td>{{todolist.bill_number}}</td>
<td>{{todolist.location}}</td>
<td><a target="_blank" href="{{ 'http://' + todolist.url}}">Download Invoice : <i title="Download Invoice" style="padding-left:5px;cursor:pointer;color:black;" class="fa fa-download"></i></a> </td>
</tr>
</tbody>
code:
angular.module('myApp', ['ngSanitize']) //Inject here
.filter('nicelist', function() {
return function(input) {
if (input instanceof Array) {
return input.join("<br>");
}
return input;
}
})
working sample up for grabs here.
ng-bind-html directive Documentation
PS: make sure you inject sanitize or you can use different techiques .
This is what I am doing.
I call a rest api which returns response in this format
"metalanguages": {
"1": {
"id": 1,
"name": "Abkhaz"
},
"2": {
"id": 2,
"name": "Afar"
}
},
"manufacturers": {
"-1": {
"id": -1,
"name": "all"
},
"1": {
"id": 1,
"name": "RIM"
},
"2": {
"id": 2,
"name": "HP"
}
}
This is basically a Map of String and Map.
I now have to create n number of table where n is number of keys of original map and inside each table I have to show data which will be the value of internal map ("id": 2,
"name": "HP")
I have made it working but search is not working.
This is my sample code
<div ng-repeat="(key,value) in metadataDetails">
<table st-table="metadataCollection" st-safe-src="metadataDetails" class="table table-striped">
<thead>
<tr class="style_tr">
<th st-sort="name">name</th>
<th st-sort="name">name</th>
<th st-sort="description">description</th>
<th st-sort="countryName">countryName</th>
<th st-sort="carrierName">carrierName</th>
</tr>
<tr class="textSearchTr">
<th colspan="4" class="textSearchTr">
<input class="freshblue" placeholder="Enter value to search/filter" type="text" ng-model="searchParam.search" />
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in getValueMap(key)" ng-show="showRow">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.description}}</td>
</tr>
</tbody>
</table>
</div>
And my js file
AuditMetadataService.get({}, function(data) {
$scope.numRecord = data.length;
$scope.metadataDetails = data;
$scope.metadataCollection = [].concat($scope.metadataDetails);
console.log("Return value :");
console.log($scope.metadataDetails);
});
$scope.getValueMap = function(key) {
console.log(key);
return $scope.metadataDetails[key];
};
Could someone please help??
You can turn your map object into an array by getting it's keys and using the Array.prototype.map function, you will have to repeat this for the inner map objects as well because st-sort expects an array item, not a key value.
$scope.tables = keys.map(function(key) {
return Object.keys(data[key]).map(function(k) {
return data[key][k];
});
});
Then you can iterate $scope.tables using ng-repeat to create all the tables want, clicking the column titles will now sort them properly.
Here is a demo.