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>
Related
I have 2 scope. I want to find based on the id of the scope "country", the country's name.
How can I print "France" for John, in this example.
$scope.country = [
{id:"1",name:"France"},
{id:"2",name:"Spain"}
];
$scope.people = [
{name:"John",country:"1"},
{name:"Ben",country:"2"}
]
I tried :
<tr ng-repeat="k in people">
<td>{{k.name}}</td>
<td>{{country | filter : {"id" : k.country } }}</td>
</tr>
I dont know if I am doit it wrong or not, but I can only get the array, not the field name of the country.
Try like this.
var app = angular.module('anApp', []);
app.controller('ctrl', function($scope) {
$scope.country = [{
id: "1",
name: "France"
},
{
id: "2",
name: "Spain"
}
];
$scope.people = [{
name: "John",
country: "1"
},
{
name: "Ben",
country: "2"
}
]
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="anApp" ng-controller="ctrl">
<div class="form-group">
<table>
<tr ng-repeat="k in people">
<td>{{k.name}}</td>
<td ng-repeat="c in country | filter:{id:k.country}">{{c.name}}</td>
</tr>
</table>
</div>
</div>
Can set filter up this way:
<td>{{(country | filter : {"id" : k.country })[0].name }}</td>
DEMO
In my opinion, generally speaking, if you want to share or access data between different scopes, you have to use the rootScope, but I recommend you to always use services if you need to share some data between scopes.
So I think it's a matter of application design not how to implement this requirement in AngularJS.
Hope this could help you
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>
In my html
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1">
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td>{{x.Country}}</td></tr>
</table>
</div>
<a href="#" >Show or Hide Button</a>
In my controller
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.names =[
{
"Name" : "Max Joe",
"City" : "Lulea",
"Country" : "Sweden"
},
{
"Name" : "Manish",
"City" : "Delhi",
"Country" : "India"
}
];
});
I need to show the button if there are no records or 1 of the country is India. I'm working on this but no avail http://jsfiddle.net/junedc/n8ejgtwa/1/ Thanks for the help guys really appreciated.
Use an array filter as well as array length to set a boolean
var hasIndia = $scope.names.filter(function(item){
return item.Country === 'India'
}).length;
$scope.showButton = !$scope.names.length || hasIndia;
In view:
<a ng-show="showButton" href="#" >Show or Hide Button</a>
I am looking a solution for dynamic data structure(inconsistent like different property name and property length) with ng-repeat. sample code are below.
$scope.data = [{
"table":[{
"employee":"name1",
"value1":"10",
"value2":"20"
},
{
"employee":"name2",
"value1":"15",
"value2":"30"
}]
},
{
"table":[{
"company":"name1",
"compnayValue":"12"
},
{
"company":"name2",
"compnayValue":"12"
}]
}]
<ul>
<li ng-repeat="item in data">
<table>
<tr ng-repeat="row in item.table">
<td>{{??}}</td>
<td>{{??}}</td>
</tr>
</table>
</li>
</ul>
You could enumerate all properties and display their values by another ng-repeat on td:
<li ng-repeat="item in data">
<table>
<tr ng-repeat="row in item.table">
<td ng-repeat="(key, value) in row">
{{row[key]}}
</td>
</tr>
</table>
</li>
but that would break the tabular format of data since some rows would have more tds. To prevent that you could first find out the set of all keys on all rows, do a th repeat with those first and then display them on the corresponding td below, e.g.:
<th ng-repeat="propertyName in allPossiblePropertyNames">
{{propertyName}}
</th>
and
<td ng-repeat="propertyName in allPossiblePropertyNames">
{{row[propertyName ]}}
</td>
Use <tbody> to represent an object inside table array and (key,value) syntax mentioned in iterating over object properties section to iterate over it's properties like:
angular.module('test', []).controller('testCtrl', function($scope) {
$scope.data = [{
"table": [{
"employee": "name1",
"value1": "10",
"value2": "20"
}, {
"employee": "name2",
"value1": "15",
"value2": "30"
}]
}, {
"table": [{
"company": "name1",
"compnayValue": "12"
}, {
"company": "name2",
"compnayValue": "12"
}]
}]
});
ul {
padding: 0;
}
ul li {
list-style-type: none;
margin-bottom: 10px;
}
table {
width: 100%;
table-layout: fixed;
background: #ebebeb;
}
tbody:nth-child(odd) tr {
color: #fff;
background: dodgerblue;
}
tbody:nth-child(even) tr {
color: #fff;
background: hotpink;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
<ul>
<li ng-repeat="item in data">
<table>
<tbody ng-repeat="row in item.table">
<tr ng-repeat="(key, value) in row">
<td>
{{key}}
</td>
<td>
{{value}}
</td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
Check this plunker, you can define template depends on your data :
https://plnkr.co/edit/fVGhKZy5gnBzuPwspy5s?p=preview
Use angular filter :
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = [{
"table":[{
"employee":"name1",
"value1":"10",
"value2":"20"
},
{
"employee":"name2",
"value1":"15",
"value2":"30"
}]
},
{
"table":[{
"company":"name1",
"compnayValue":"12"
},
{
"company":"name2",
"compnayValue":"12"
}]
}]
})
.filter('isCompnay', function() {
return function(input) {
console.log(input.employee === undefined)
return input.company ? input : undefined;
};
})
.filter('isEmployee', function() {
return function(input) {
console.log(input.employee === undefined)
return input.employee ? input : undefined;
};
});
{ "_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