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
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 am trying to print the data under tabular format .
The data which is present under "properties" (ApprovalStatusShrtStrngVal and FluidCodeShrtStrngVal)
I have tried as
<div ng-app="myapp" ng-controller="FirstCtrl">
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo.records.properties">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo">
<td ng-repeat="column in row">
{{ column }}
</td>
</tr>
</table>
</div>
JSON is
{
"records": [{
"keys": ["n"],
"length": 1,
"_fields": [{
"identity": {
"low": 1128,
"high": 0
},
"labels": ["TestLabel"],
"properties": {
"ApprovalStatusShrtStrngVal": "Working",
"FluidCodeShrtStrngVal": "P"
}
}],
"_fieldLookup": {
"n": 0
}
}, {
"keys": ["n"],
"length": 1,
"_fields": [{
"identity": {
"low": 1129,
"high": 0
},
"labels": ["TestLabel"],
"properties": {
"ApprovalStatusShrtStrngVal": "Working",
"FluidCodeShrtStrngVal": "P"
}
}],
"_fieldLookup": {
"n": 0
}
}],
"summary": {
"statement": {
"text": "MATCH (n:TestLabel) RETURN n LIMIT 25",
"parameters": {}
},
"statementType": "r",
"counters": {
"_stats": {
"constraintsRemoved": 0
}
},
"updateStatistics": {
"_stats": {
"constraintsRemoved": 0
}
},
"plan": false,
"profile": false,
"notifications": [],
"server": {
"address": "localhost:7687",
"version": "Neo4j/3.2.0"
},
"resultConsumedAfter": {
"low": 37,
"high": 0
},
"resultAvailableAfter": {
"low": 3,
"high": 0
}
}
}
http://jsfiddle.net/9fR23/498/
please let me know how to fix this
ApprovalStatusShrtStrngVal FluidCodeShrtStrngVal (Header)
Working P (Values)
You have to loop through your array properly to get the desired result.
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo.records[0]._fields[0].properties">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo.records">
<td ng-repeat="column in row._fields[0].properties">
{{ column }}
</td>
</tr>
</table>
Working Fiddle :http://jsfiddle.net/9fR23/499/
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 .
{ "_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
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>