I have the userdata out of my passport implementation and i will show them in the admin panel.
$scope.users = [
{
"id": "1",
"local": [
{"email": "test1#email.de"},
{"name": "Holger"}
]
},
{
"id": "2",
"local": [
{"email": "test2#email.de"},
{"name": "Robert"}
]
},
{
"id": "3",
"facebook": [
{"email": "test3#email.de"},
{"name": "Robert"}
]
}
]
How can i group / order the data depending on the index?
For example:
local
1 Holger test1#email.de
2 Robert test2#email.de
facebook
3 Robert test3#email.de
and how is it possible to list the array in local or facebook undepending of the index.
http://jsfiddle.net/D9MAB/2/
EDIT (added display of name and email):
http://jsfiddle.net/D9MAB/4/
<body ng-app="app" ng-controller="projects">
Local
<table>
<tr ng-repeat="(index, user) in users | filter:{local:''}">
<td>{{user.id}}</td>
<td ng-repeat="(index, detail) in user.local">{{detail.name}}</td>
<td ng-repeat="(index, detail) in user.local">{{detail.email}}</td>
</tr>
</table>
Facebook
<table>
<tr ng-repeat="(index, user) in users | filter:{facebook:''}">
<td>{{user.id}}</td>
<td ng-repeat="(index, detail) in user.facebook">{{detail.name}}</td>
<td ng-repeat="(index, detail) in user.facebook">{{detail.email}}</td>
</tr>
</table>
Related
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>
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>
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 playing around with Angular for the first time and having trouble with ng-repeat, repeating thought a json
[
{
"class": "Torture",
"type": "Cruiser",
"name": "The Impending Doom",
"leadership": 7,
"pts": "250 pts",
"speed": "35cm",
"turns": "90\u00B0",
"armour": 5,
"squadron": "Death Makes",
"hitpoints": 6,
"weapons": [
{
"name": "Impaler",
"firepower": 2,
"ordnances": [
{
"type": "Attack Craft",
"range": "30cm"
}
]
}
],
"refits": {},
"crew skills": {},
"battle log": [
{
"Data": "",
"Log": ""
}
]
},
{
"class": "Torture",
"type": "Cruiser",
"name": "Pain Giver",
"leadership": 7,
"pts": "250 pts",
"speed": "35cm",
"turns": "90\u00B0",
"armour": 5,
"squadron": "Death Makes",
"hitpoints": 6,
"weapons": [
{
"name": "Launch Bays",
"firepower": 4,
"ordnances": [
{
"type":"Fighters",
"range": "30cm"
},
{
"type":"Bombers",
"range": "20cm"
},
{
"type":"Boats",
"range": "30cm"
}
]
},
{
"name": "Prow Torpedo Tubes",
"firepower": 4,
"ordnances": [
{
"type": "Torpedos",
"range": "30cm"
}
]
}
],
"refits": {},
"crew skills": {},
"battle log": [
{
"Data": "",
"Log": ""
}
]
}
]
Now the problem I have is when I try to repeat thought the ordnance's I get the worry amount as there a two different amount of ordnance's.
Here my HTML
<div ng-repeat="ship in fleet" class="squadron__table">
<table>
<caption>{{ ship.name }}</caption>
<tr>
<td class="space">{{ ship.type }}</td>
<td class="space">{{ ship.class }}</td>
<td class="space">{{ ship.leadership }}</td>
<td class="space">{{ ship.speed }}</td>
<td class="space">{{ ship.turns }}</td>
<td class="space">{{ ship.armour }}</td>
<td class="space">{{ ship.hitpoints }}</td>
<td class="space">{{ ship.pts }}</td>
</tr>
<tr>
<th colspan="2">Armament</th>
<th colspan="2">Fire power</th>
<th colspan="4">Ordnance</th>
</tr>
<tr ng-repeat="weapon in ship.weapons">
<td colspan="2">{{ weapon.name }}</td>
<td colspan="2">{{ weapon.firepower }}</td>
<td colspan="2">
{{ weapon.ordnances.type }}
---
{{ weapon.ordnances.range }}
</td>
</tr>
</table>
</div>
and the controller
$http.get( '/json/' + $routeParams.squadrionName + '.json', { cache: $templateCache } )
.success(function( data) {
$scope.fleet = data;
})
The end result I'm looking for is
when the ship has launch bays and torpedo it print s out the three different type of ship and the one torpedos.
ordnances can have one or more than one items so you need to use the ngRepeat again, like this:
<td colspan="4">
<div ng-repeat="ordnance in weapon.ordnances">
{{ ordnance.type }} --- {{ ordnance.range }}
</div>
</td
{ "_id" : 1, "name" : { "first" : "John", "last" : "Backus" }, "contribs" : [ "Fortran", "ALGOL", "Backus-Naur Form", "FP" ], "awards" : [ { "award" : "W.W. McDowell Award", "year" : 1967, "by" : "IEEE Computer Society" }, { "award" : "Draper Prize", "year" : 1993, "by" : "National Academy of Engineering" } ] }
I have take your JSON format and binded it in to table using ng-repeat.
ng repaet sample in html file:
<body ng-controller="Ctrl">
<tbody ng-repeat="dat in alldata">
<tr>
<td colspan="3">{{dat.name.first}} {{dat.name.last}}</td>
</tr>
<tr><td colspan="3" align="center"><span style="font-weight:bold">Contribution</span></td></tr>
<tr ng-repeat="cont in dat.contribs">
<td colspan="3">{{ cont}}</td>
</tr>
<tr><td colspan="3" align="center"><span style="font-weight:bold">Awards</span></td></tr>
<tr ng-repeat="aw in dat.awards">
<td>{{ aw.award}}</td>
<td>{{ aw.year}}</td>
<td>{{ aw.by}}</td>
</tr>
</tbody>
Sample Script file:
var app = angular.module("app",[]);
app.controller('Ctrl', function($scope) {
$scope.alldata = [
{
"_id":1,
"name":{
"first":"John",
"last":"Backus"
},
"contribs":[
"Fortran",
"ALGOL",
"Backus-Naur Form",
"FP"
],
"awards":[
{
"award":"W.W. McDowell Award",
"year":1967,
"by":"IEEE Computer Society"
},
{
"award":"Draper Prize",
"year":1993,
"by":"National Academy of Engineering"
}
]
}
];
});
Please find the plnkr link for it: Plnkr