Get an object from server. look like this:
"courses": [
{
"id": 1,
"name": "piano",
"classes": [
{
"id": 1,
"name": "piano1",
},
{
"id": 2,
"name": "piano2",
}
],
"classes_count": 2,
"feedbacks_count": 4
},
]
JS: there I get data to Scope
httpService.getService(url, data).then(function(res) {
$scope.datas = res.body.courses;
console.log($scope.datas);
})
I need to print classes id in ng-repeat. try to do this
<ul class="dropdown-list" style="display: none;">
<li ng-repeat="course in datas | filter:{'id': showprofile}:true ">{{course.classes.id}}</li>
</ul>
But it's work when I print {{course.classes}} and I get an array with 2 objects. How to show in "li" element course.classes.id ?
You have array in array, so you have got 2 ng-repeats: first iterating over courses and second over classes.
<ul ng-repeat="course in datas" class="dropdown-list" style="display: none;">
<li ng-repeat="class in course.classes">{{class.id}}</li>
</ul>
You need to add another loop for nested elements
<ul class="dropdown-list" style="display: none;">
<li ng-repeat="course in datas" ng-if='$first'> {{course.id}}</li>//
<ul ng-if="course.classes.length">
<li ng-repeat="classes in course"> {{course.classes.id}}</li>
</ul>
</ul>
Related
Here I am having a issue below is my json data
data = {
"required": false,
"name": "data",
"details": [
{
"name": "type",
"details": {
"visible": false,
}
},
{
"name": "Creation",
"details": {
"visible":true,
}
},
{
"name": "Creation",
"details": {
"visible": false,
}
},
{
"name": "Modification",
"details": {
"visible": true,
}
}
]
}
.html code
<ng-container *ngFor="let x of data.details">
<ul>
<li *ngIf="x.details.visible">
{{x.name}}
</li>
</ul>
</ng-container>
The issue here is even though I condition is true here it is creating empty tags by this my html style is getting disturbed and getting unwanted spaces
in the console it showed me like this
<ul _ngcontent-c76=""><!--bindings={
"ng-reflect-ng-if": "false"
}--></ul>
<ul _ngcontent-c76=""><!--bindings={
"ng-reflect-ng-if": "true"
}--><li _ngcontent-c76=""> Creation </li></ul>
<ul _ngcontent-c76=""><!--bindings={
"ng-reflect-ng-if": "false"
}--></ul>
<ul _ngcontent-c76=""><!--bindings={
"ng-reflect-ng-if": "true"
}--><li _ngcontent-c76=""> Modification</li></ul>
How can I remove that empty spaces.
Below is my stack blitz URL.
https://stackblitz.com/edit/angular-yw2zy5
Issues with your implementation:
You have *ngFor on the ul instead of the li. That is making the ul getting repeated on the DOM and thus breaking your style.
You should be using the ng-container as a parent of the li instead of using it as a parent to the ul. That way, you will be able to add the *ngIf condition on the li while using *ngFor on the ng-container.
Give this a try:
<hello name="{{ name }}"></hello>
<ul>
<ng-container *ngFor="let x of data.details">
<li *ngIf="x.details.visible">
{{x.name}}
</li>
</ng-container>
</ul>
Here's a Sample StackBlitz for your ref.
You should change your template to following
<ul>
<ng-container *ngFor="let x of data.details">
<li *ngIf="x.details.visible">
{{x.name}}
</li>
</ng-container>
</ul>
You would not want to have bunch of ul with single li elements. What the code above will do is to create a single ul and add some li elements within if x.details.visible condition is met
i get a json data from api call for errors list of various items with id, name, error_type and message. I need to display a header with name and id of the item and under that a list of all errors belonging to that id. i am using unique filter in angular but that is skipping the next object with same id. I want some help to merge the object property when the id is same.
var items =[ {
"id": 83739,
"name": "abcd",
"type": "error",
"msg": "For Macros, x >= y"
},
{
"id": 83739,
"name": "abcd",
"type": "warning",
"msg": "Missing Power Condition"
},{
"id": 83740,
"name": "efgh",
"type": "error",
"msg": "Missing Power supply"
}]
<div ng-repeat="item in items | unique:'id'">
<h4> {{io.item}}</h4>
<ul>
<li > {{item.type}}: {{item.msg}}</li>
</ul>
</div>
My output i need is like this
<div>
<h4> abcd</h4>
<ul>
<li > error: For Macros, x >= y</li>
<li > warning: Missing Power Condition</li>
</ul>
</div>
<div>
<h4> efgh</h4>
<ul>
<li > error: Missing Power supply</li>
</ul>
</div>
Add a ng-repeat directive to your li and apply a filter, like this:
<li ng-repeat="i in items | filter: {id: item.id}"> {{i.type}}: {{i.msg}}</li>
In context:
<div ng-repeat="item in items | unique:'id'">
<h4>
{{io.item}}
</h4>
<ul>
<li ng-repeat="i in items | filter: {id: item.id}"> {{i.type}}: {{i.msg}}</li>
</ul>
</div>
Here's a working plunk
I am trying to get the inner array of the array main in side_menu_angular.js. The first part of the array, i am able to detect it and it works. From the second on wards did not work. My structure of my HTML is slightly different which I think it affects the calling of those inner arrays. What have I done wrong here or have I missed out?
Below are my codes:
HTML
<div ng-app="theme" ng-controller="sideController">
<div id="mainSlideout">
<div id="mainSlideMenu">
<ul style="list-style-type: none;">
<li class="active" ng-repeat="main in menuName">
<h3><a class="mainMenuItem" id="photography">{{main.main_menu}}</a></h3>
</li>
</ul>
</div>
</div>
<div id="slideout">
<div id="slideMenu" >
<ul style="list-style-type: none;" >
<li class="active" ng-repeat-start="sub in menuName" ng-repeat="menus in sub.main_content">
<h3><a class="menuItem" id="{{menus.name}}">{{menus.name}}</a></h3>
</li>
<li id="{{subMenu.id}}" class="draggable {{menus.name}}" ng-repeat="subMenu in menus.element" ng-repeat-end>
<img ng-src="{{subMenu.template}}" id="{{subMenu.id}}" />
</li>
</ul>
</div>
</div>
</div>
side_menu_angular.js
angular.module( 'theme' , [
] ).controller('sideController' , function($scope){
$scope.menuName = [
{ main_menu:'Photography' , main_content:[
{ name:'Header' , element:[
{ id:'template1' , template:'wp-content/themes/dynamictheme/img/template/header/template1.png' },
{ id:'template2' , template:'wp-content/themes/dynamictheme/img/template/header/template2.png' }
]
},
{ name:'Content' , element:[
{ id:'template3' , template:'wp-content/themes/dynamictheme/img/template/header/template3.png' }
]
},
{ name:'Footer' , element:[
{ id:'template4' , template:'wp-content/themes/dynamictheme/img/template/header/template4.png' }
]
}]
}];
})
;
The problem lies here.
<li id="{{subMenu.id}}" class="draggable {{menus.name}}" ng-repeat="subMenu in menus.element" ng-repeat-end>
<img ng-src="{{subMenu.template}}" id="{{subMenu.id}}" />
</li>
You have used subMenu in menus.element but menus is not available to this ng-repeat. Only sub is available here as it lies within the ng-repeat-start block.
Here is a good solution which explains about nesting ng-repeat-starts which seems like a nice solution.
I am creating a new ul>li>ul>li list and I want to repeat the data according to the list items.
My code is like this:
My Angular code is:
var myAppMy = angular.module('myFapp', []);
myAppMy.controller('myControler', function ($scope) {
$scope.items = [
{
title:"book" [
{subtitle:"name", description:"____Book_______"}
],
description: "Some Book is very Good."
},
{
title:"book_2" [
{subtitle:"name", description:"____Book_2______"}
],
description: "2Some Book is very Good."
}
];
});
My HTML code is:
<body ng-app="myFapp">
<ul ng-controller="myControler">
<li ng-repeat="item in items">
<div>{{item.title}}</div>
<div>{{item.description}}</div>
<ul>
<li>
<div>{{subtitle.title}}</div>
<div>{{item.description}}</div>
</li>
</ul>
</li>
</ul>
</body>
My Plunker
Your JSON is improper, It needs to be in this format:
JSON:
$scope.items = [
{
"title":"book" ,"subtitle":[
{"subtitle":"name", "description":"____Book_______"}
],
"description": "Some Book is very Good."
},
{
"title":"book_2" , "subtitle":[
{"subtitle":"name", "description":"____Book_2______"}
],
"description": "2Some Book is very Good."
}
];
And then in your html markup you need to reference it like this (nested ng-repeat):
<ul ng-controller="myControler">
<li ng-repeat= "item in items">
<div>{{item.title}} </div>
<div>{{item.description}}</div>
<ul>
<li ng-repeat="subtitle in item.subtitle">
<div>{{subtitle.subtitle}} </div>
<div>{{subtitle.description}}</div>
</li>
</ul>
</li>
</ul>
Working Plunkr
The goal is to create this
<h3>11.4.2013</h3>
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
</ul>
<h3>10.4.2013</h3>
<ul>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
</ul>
from this
[
{
"name": "entry1",
"date": "11.4.2013"
},
{
"name": "entry2",
"date": "11.4.2013"
},
{
"name": "entry3",
"date": "11.4.2013"
},
{
"name": "entry4",
"date": "10.4.2013"
},
{
"name": "entry5",
"date": "10.4.2013"
},
{
"name": "entry6",
"date": "10.4.2013"
}
]
The problem is that ng-repeat would have to be on li so I wouldn't never be able to do this using ng-repeat, is that right? I found this http://jsfiddle.net/mrajcok/CvKNc/ example from Mark Rajnoc, but it's still pretty limiting..
What other choices do I have? Write my own ng-repeat like directive? Or is there another way to do it without writting one?
You could write your own filter that filters out the unique dates for an outer ng-repeat, something like:
filter('unique',function(){
return function(items,field){
var ret = [], found={};
for(var i in items){
var item = items[i][field];
if(!found[item]){
found[item]=true;
ret.push(items[i]);
}
}
return ret;
}
});
with the following markup:
<div ng-repeat="dateItem in items | unique:'date' | orderBy:'date'">
<h3>{{dateItem.date}}</h3>
<ul>
<li ng-repeat="item in items | filter:dateItem.date">
{{item.name}}
</li>
</ul>
</div>
Have a look at this working plnkr example -- or this updated example with adding items
However, if your going to have a lot of items (hundreds or thousands) this solution is not the most optimal. An alternative approach would be to create a more optimal data structure. You can even get this to work with your original data structure by adding a $watch - something like:
$scope.$watch('items',function(){
var itemDateMap = {};
for(var i=0; i<$scope.items.length; i++){
var item = $scope.items[i], key = item.date;
if(!itemDateMap[key]){
itemDateMap[key] = [];
}
itemDateMap[key].push(item);
}
$scope.itemDateMap=itemDateMap;
},true);
Works with this markup:
<div ng-repeat="(date,subItems) in itemDateMap">
<h3>{{date}}</h3>
<ul>
<li ng-repeat="item in subItems">
{{item.name}}
</li>
</ul>
</div>
Here is an example where you can add lots of random items.
When I have same needs like yours, I used Object instead of Array.
<div ng-repeat="item in data">
<h1>{{item.date}}</h1>
<ul ng-repeat="name in item.names">
<li>{{name}}</li>
</ul>
</div>
http://jsfiddle.net/shoma/DqDsE/1/
This question page would help you.
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?