{ "_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
Related
What I need to do is show button in table, but when "name" is "True" the button should not show. Only when "name" is "False: the button should be in the table.
My Json
[
"name" : "False",
"date" : "22/02/2015"
},
{
"name" : "False",
"date" : "18/03/2013"
},
{
"name" : "True",
"date" : "12/06/2012"
}]
My table
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
<td><button ng-model="post">POST</button></td>
</tr>
You could use ng-if to show and hide button
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
<td>
<button ng-if="name.name === 'False'">POST</button>
</td>
</tr>
you can use ng-if or ng-show or ng-hide
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
<td>
<button ng-if="!name.name">POST</button>
</td>
Go througth this link https://stackoverflow.com/a/21870119/6554634 to get better idea about ng-if, ng-show and ng-hide.
And there is mistake in your data, there is no opening brace for first object. This is silly but causes loss if we didn't notice.
[
{
"name" : "False",
"date" : "22/02/2015"
},
{
"name" : "False",
"date" : "18/03/2013"
},
{
"name" : "True",
"date" : "12/06/2012"
}
]
I prefer ng-if as it removes element from DOM if not necessary.
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
<td><button ng-model="post" ng-if="name.name==='False'">POST</button></td>
</tr>
Your JSON is invalid
Use ng-show to show the button when name is True.
Working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.names = [{
"name" : "False",
"date" : "22/02/2015"
},
{
"name" : "False",
"date" : "18/03/2013"
},
{
"name" : "True",
"date" : "12/06/2012"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
<td><button ng-model="post" ng-show="name.name == 'True'">POST</button></td>
</tr>
</table>
</div>
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
For example I have a following smart table which I've created by using smart table angularjs module and following SO answer:
<table st-table="positions" class="table">
<thead>
<tr>
<th class="text-center">Menu</th>
</tr>
</thead>
<tbody ng-repeat="position in positions">
<tr>
<th class="warning">{{position.title}}</th>
</tr>
<tr ng-repeat="item in position.items">
<td>{{item.title}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center"
st-pagination=""
st-items-by-page="5"
st-displayed-pages="7">
</td>
</tr>
</tfoot>
</table>
JSON data for this list are following:
{
"positions" : [{
"title" : "position 1",
"id" : 1,
"items" : [{
"id" : 1,
"title" : "position 1 - item 1"
}, {
"id" : 2,
"title" : "position 1 - item 2"
}
]
}, {
"title" : "position 2",
"id" : 2,
"items" : [{
"id" : 3,
"title" : "position 2 - item 3"
}
]
}
]
}
Table has been build as I wish but pagination doesn't work and I suspect that it's because I've used st-table="positions"
st-table attribute to tell smart-table which collection holds your displayed data,
positions array doesn't represent all rows of the table.
Thank you.
i need some help to make nested ng-repeat.
I have the following code which which is not nested.Currently it prints all subject first and than it prints all student names.
However, I need to print students for each subject.
How i can convert it in nested ng-repeat?
<tr>
<td>Student</td>
<td width="100px" ng-repeat="subject in subjects" colspan="3">{{subject.Name}}
</td>
</tr>
<tr>
<th width="296"></th>
<th class="rotate-45" ng-repeat="student in studentNames">
<div>
<span>{{student}}</span>
</div>
</th>
</tr>
Here is example for nested ng-repeat. this might be helpful to you.happy coding
<body ng-app="WeeklyApp" ng-controller="WeeklyController" >
<div ng-repeat="week in myData">
<div ng-repeat="day in week.days">
{{day.dow}} - {{day.templateDay}}
<b>Jobs:</b><br/>
<ul>
<li ng-repeat="job in day.jobs">
{{job.name}}
</li>
</ul>
</div>
</div>
</body>
<script>
var WeeklyApp = angular.module('WeeklyApp', []);
WeeklyApp.controller('WeeklyController', ['$scope', function ($scope) {
$scope.myData = [{
"number" : "2013-W45",
"days" : [{
"dow" : "1",
"templateDay" : "Monday",
"jobs" : [{
"name" : "Wakeup",
"jobs" : [{
"name" : "prepare breakfast",
}
]
}, {
"name" : "work 9-5",
}
]
}, {
"dow" : "2",
"templateDay" : "Tuesday",
"jobs" : [{
"name" : "Wakeup",
"jobs" : [{
"name" : "prepare breakfast",
}
]
}
]
}
]
}
];
}]);
</script>
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>