orderBy feature is not working with the dates when i try to use in the ng-repeat
Here I wanted to sort the entried based on the executedOn
I wanted to sort element the latest date should be reflected at the top.
Can someone help me
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.details = [
{
"id": 255463,
"orderId": 226433,
"status": 1,
"executedOn": "25/Sep/17",
"executedBy": "Person A",
"executedByDisplay": "Person A",
"cycleId": 4042,
"cycleName": "Cycle A",
"versionId": 21289,
"versionName": "Version A",
"issueKey": "A"
},
{
"id": 255433,
"orderId": 226403,
"status": 1,
"executedOn": "1/Mar/17",
"executedBy": "Person B",
"executedByDisplay": "Person B",
"cycleId": 4041,
"cycleName": "Cycle B",
"versionId": 21289,
"versionName": "Version A",
"issueKey": "B"
},
{
"id": 255432,
"orderId": 226402,
"status": 1,
"executedOn": "1/Apr/17",
"executedBy": "Person B",
"executedByDisplay": "Person B",
"cycleId": 4041,
"cycleName": "Cycle B",
"versionId": 21289,
"versionName": "Version A",
"issueKey": "C"
}
];
});
th, td {
border-bottom: 1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<body ng-controller="MainCtrl">
<table class="table h6">
<thead>
<tr>
<th>#</th>
<th>Cycle Name</th>
<th>Execution Completed</th>
<th>Total Test Cases</th>
</tr>
</thead>
<tr ng-repeat="x in details | orderBy :'executedOn'">
<td>{{$index+1}}</td>
<td>{{x.cycleName}}</td>
<td>{{x.executedOn | date:'d-MMM-yy'}}</td>
<td>{{x.versionName}}</td>
</tr>
</table>
</body>
</html>
What about to convert "executedOn" to Date Object: new Date("25/Sep/17"),
You can do that as:
$scope.details.map(function(item){
item.executedOn = new Date(item.executedOn);
return item;
});
The sorting will work properly
<tr ng-repeat="x in details | orderBy :'executedOn'">
<td>{{$index+1}}</td>
<td>{{x.cycleName}}</td>
<td>{{x.executedOn | date:'d-MMM-yy'}}</td>
<td>{{x.versionName}}</td>
</tr>
Demo Plunker
You can use A getter function as orderBy expression. This function will be called with each item as argument and the return value will be used for sorting. see details in demo
js
$scope.makerightorder = function(x){
return new Date(x.executedOn);
}
obviously use true as 2nd argument to see latest first
html
<tr ng-repeat="x in details | orderBy :makerightorder:true ">
<td>{{$index+1}}</td>
<td>{{x.cycleName}}</td>
<td>{{x.executedOn | date:'d-MMM-yy'}}</td>
<td>{{x.versionName}}</td>
</tr>
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 an angular object, i have to show its records with filter and sorting. Also i have to show the records of unique values per keys within the object with checkbox.
I shows record with filter and sorting also i showed the unique values per key with checkbox.
Now i have to get the values of these checkbox per key.
Here is my code with plunker url below.
index.html
<body ng-controller="myController">
<label ng-repeat="option in structure.tabs">
<input type="checkbox" ng-model="option.selected">{{option.index}}
</label>
<table border="1" width="100%">
<tr>
<th ng-repeat="header in structure.tabs" ng-show="header.selected" ng-click="sortData(header.filter)">{{header.index}}</th>
</tr>
<tr ng-repeat="data in structure.info | orderBy:sortColumn:reverseSort">
<td ng-show="structure.tabs[0].selected">{{data.name}}</td>
<td ng-show="structure.tabs[1].selected">{{data.age}}</td>
<td ng-show="structure.tabs[2].selected">{{data.city}}</td>
<td ng-show="structure.tabs[3].selected">{{data.designation}}</td>
</tr>
</table>
<h1>Unique Values Table (per key)</h1>
<table border="1" width="100%" style="margin-top: 50px;">
<tr>
<th ng-repeat="header1 in structure.tabs" ng-show="header1.selected">{{header1.index}}</th>
</tr>
<tr>
<td ng-repeat="(hk, hv) in structure.tabs" ng-show="hv.selected">
<table border='1'>
<tr ng-repeat="(dk, dv) in structure.info | unique:hv.filter">
<td>
<input type="checkbox">{{dv[hv.filter]}}
</td>
</tr>
</table>
<br>
<button ng-click="getChecked(hv.filter)">Get Checked</button>
</td>
</tr>
</table>
</body>
app.js
var app = angular.module('myApp', []);
app.controller("myController", function ($scope,$log) {
$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column) {
$scope.reverseSort=($scope.sortColumn==column) ? !$scope.reverseSort : false;
$scope.sortColumn=column;
}
$scope.structure={
"tabs": [
{
"index": "Name",
"filter": "name",
"selected": true
},
{
"index": "Age",
"filter": "age",
"selected": true
},
{
"index": "City",
"filter": "city",
"selected": true
},
{
"index": "Designation",
"filter": "designation",
"selected": true
}
],
"info": [
{
"name": "Abar",
"age": "27",
"city": "Ghaziabad",
"designation": "Php Developer"
},
{
"name": "Abar",
"age": "27",
"city": "Okhla",
"designation": "Html Developer"
},
{
"name": "Nishant",
"age": "25",
"city": "Delhi",
"designation": "Angular Developer"
},
{
"name": "Amit",
"age": "30",
"city": "Noida",
"designation": "Android Developer"
}
]
};
$scope.getChecked = function(tab) {
alert("Need to get all checked value of key: "+tab);
}
});
app.filter('unique', function() {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for(i=0; i<l;i+=1) {
o[arr[i][field]] = arr[i];
}
for(i in o) {
r.push(o[i]);
}
return r;
};
});
See in plunker http://embed.plnkr.co/wblXhejmSWApBeCAusaI/
You can do like below example:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<h1>Filter Table</h1>
<label ng-repeat="option in structure.tabs">
<input type="checkbox" ng-model="option.selected">{{option.index}}
</label>
<table border="1" width="100%">
<tr>
<th ng-repeat="header in structure.tabs" ng-show="header.selected" ng-click="sortData(header.filter)">{{header.index}}</th>
</tr>
<tr ng-repeat="data in structure.info | orderBy:sortColumn:reverseSort">
<td ng-show="structure.tabs[0].selected">{{data.name}}</td>
<td ng-show="structure.tabs[1].selected">{{data.age}}</td>
<td ng-show="structure.tabs[2].selected">{{data.city}}</td>
<td ng-show="structure.tabs[3].selected">{{data.designation}}</td>
</tr>
</table>
<h1>Unique Values Table (per key)</h1>
<table border="1" width="100%" style="margin-top: 50px;">
<tr>
<th ng-repeat="header1 in structure.tabs" ng-show="header1.selected">{{header1.index}}</th>
</tr>
<tr>
<td ng-repeat="(hk, hv) in structure.tabs" ng-show="hv.selected">
<table border='1'>
<tr ng-repeat="(dk, dv) in structure.info | unique:hv.filter">
<td>
<input ng-model="item" type="checkbox" ng-change="getCheckedValues(item,dv,hv.filter)">{{dv[hv.filter]}}
</td>
</tr>
</table>
<br>
<button ng-click="getChecked(hv.filter)">Get Checked</button>
</td>
</tr>
</table>
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller("myController", function ($scope,$log) {
$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column) {
$scope.reverseSort=($scope.sortColumn==column) ? !$scope.reverseSort : false;
$scope.sortColumn=column;
}
var array = []
array["name"] = [];
array["age"] = [];
array["designation"] = [];
array["city"] = [];
$scope.getCheckedValues = function(e,val,key){
console.log(val)
if(e){
array[key].push(e)
}else{
array[key].shift()
}
}
$scope.structure={
"tabs": [
{
"index": "Name",
"filter": "name",
"selected": true
},
{
"index": "Age",
"filter": "age",
"selected": true
},
{
"index": "City",
"filter": "city",
"selected": true
},
{
"index": "Designation",
"filter": "designation",
"selected": true
}
],
"info": [
{
"name": "Abar",
"age": "27",
"city": "Ghaziabad",
"designation": "Php Developer"
},
{
"name": "Abar",
"age": "27",
"city": "Okhla",
"designation": "Html Developer"
},
{
"name": "Nishant",
"age": "25",
"city": "Delhi",
"designation": "Angular Developer"
},
{
"name": "Amit",
"age": "30",
"city": "Noida",
"designation": "Android Developer"
}
]
};
$scope.getChecked = function(tab) {
alert("Need to get all checked value of key: "+tab);
console.log(array[tab])
}
});
app.filter('unique', function() {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for(i=0; i<l;i+=1) {
o[arr[i][field]] = arr[i];
}
for(i in o) {
r.push(o[i]);
}
return r;
};
});
Alright. Apologies for my previous answer I completely botched the question.
Anyhow I spent almost an hour trying to solve this and managed to do it using $scope.$$watchers[0].last and underscorejs.
//this is how getChecked looks like now
$scope.getChecked = function(tab) {
var selectedKey = tab.$$watchers[0].last;
_.each($scope.structure.info,function(row){
_(row).pairs().filter(function(item){
_.each(item,function(key){
if(key===selectedKey)
{
console.log(row);
return;
}
})
})
})
Above method is responsible for identifying the key and spitting in console, each time you select a key in below table. So check console.
The solution is on below plunkr.
https://embed.plnkr.co/kbiCwhW0RrdHtO3hVEEk/
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 .
I'm trying to use orderBy functionality in angular, and order by RollNo but its not working please check my code below
SCRIPT
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('http://localhost/angular/jason/index.php').success(function(data) {
$scope.countries = data;
data.RollNo = parseFloat($data.RollNo);
});
});
JSON
data = [{
"Name": "Kamal",
"RollNo": "20",
"Class": "Class 12"
}, {
"Name": "Amar",
"RollNo": "12",
"Class": "Class 10"
}, {
"Name": "Rajesh",
"RollNo": "9",
"Class": "Class 7"
}]
HTML
<body ng-controller="CountryCtrl">
<input type="text" ng-model="name">
<table>
<tr>
<th>Name</th>
<th>Roll Number</th>
<th>Class</th>
</tr>
<tr ng-repeat="country in countries | filter:name | orderBy:'RollNo'">
<td>{{country.Name}}</td>
<td>{{country.RollNo}}</td>
<td>{{country.Class}}</td>
</tr>
</table>
</body>
You are doing data.RollNo = parseFloat($data.RollNo); that wont work, you need to loop throw object and do it.
You need to convert RollNo property of counrty object to number first then you can apply orderBy
CODE
var newArray = [];
angular.forEach($scope.countries, function(val, index){
newArray.push(val);
newArray[newArray.length-1].RollNo = parseInt(newArray[newArray.length-1].RollNo);
});
$scope.countries = newArray;
Working Plunkr
Hope this could help you. Thanks.
seems like your code is not correct
in
<tr ng-repeat="country in countries | filter:name | orderBy:'RollNo'">
you have used orderBy:'RollNo' and RollNo with in single quotes. that's the issue
change that to
<tr ng-repeat="country in countries | filter:name | orderBy:RollNo">
and it will work fine.
here is the Demo Plunker