I am using metro ui and am trying to use ng-repeat within it to build html within a popup.
My template looks like this. Any thoughts would help. I have verified the data is there, but ng-repeat just doesn't work within double quotes. I've tried using single quotes, but that doesn't work.
Here's my template.
<div class="container">
<div class="title-group six">
<a ng-repeat="product in products"
data-hint="{{product.name}}|<div><ul><li ng-repeat='color in product.colors'>{{color.name}}</li> </ul></div>" href="#/product/{{product.id}}" class="tile bg-violet" data-click="transform" >
<div class="tile-content icon">
<img src="{{product.pic}}">
</div>
<div class="brand">
<div class="label">{{product.name}} </div>
</div>
</a>
</div>
As a start, your HTML is malformed, you need a closing DIV tag on the end.
Also, in your ng-repeat, your variable name should be different to the array. I'd suggest something like:
ng-repeat="p in products" or ng-repeat="product in products"
Hopefully this helps.
Related
I am trying to show the value from my json files using ng-repeat in angular js but I am unable to do that.
This is my code which I am trying:
<div ng-repeat = "x in myWelcome.definition">
{{x.attributes[0].children[0].node_id}}
<hr>
</div>
I have tried this and it is working:
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
<div ng-if ="a.attributes">
a: {{a.attributes[0].rm_attribute_name}}
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
I am trying to understand how this line is working {{a.attributes[0].rm_attribute_name}} why it is not working like this {{a.attributes1.rm_attribute_name}} this is confusing. How it is shwoing all the results when I am using 0 and index.
And my json file is here in the plunker:
Plunker link of json and code
So how can I iterate here using ng-repeat here this code:
{{myWelcome.definition.attributes[0]}}
is working how can I show this in my view using ng-repeat I need to show all the attributes and child using ng-repeat.
ng-repeat can be used in the following way:
<div ng-repeat = "(key,value) in myWelcome.definition.attributes">
Key:{{key}} and value :{{value}}
<hr>
</div>
OR you can Try this:
<div ng-repeat = "x in myWelcome.definition.attributes">
<div ng-repeat="a in x.children">
a:{{a.node_id}}
</div>
</div>
Edited Plunker
I can see you are trying to implement ng-if and ng-repeat for your json file. You need to understand how ng-repeat works you can always check the index of you array using {{$index}}. So for your kind of problem I think this is the solution you should try.
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
{{$index}}
<div ng-if ="a.attributes">
<div ng-repeat="b in a.attributes">
<hr>
{{b.children.length}}
<div ng-if="b.children.length > 1">
If the array is more than 1 please do the magic here
</div>
</div>
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
You can always see the indexes using {{$index}} and you should always use .length to check if it has more than 1 value. This way you can achieve what you want and you should also learn something about arrays in javascript and what is the differnece between dot and bracket. Please read this http://www.dev-archive.net/articles/js-dot-notation/. I think you should learn the basics of javascript.
This can be a dumb question. But I hope you can help me with this. I'm doing something like this:
<div ng-repeat="item in list" class="display-item">
<ng-include src="mytemplate.html"></ng-include>
<div ng-if="($index%2) == 0">
<p>An inserted content when index is an even number.</p>
</div>
</div>
Now this is working. The problem starts when I'm making the page responsive in all devices, cause you see when I inserted the p tag, it was created inside the parent div tag with the class display-item. What I want to do is put it outside the div tag so when the screen is smaller the p tag will not be affected by the parent tag and vise versa. So something like this:
<div ng-repeat="item in list" class="display-item">
<ng-include src="mytemplate.html"></ng-include>
</div>
<div ng-if="($index%2) == 0">
<p>An inserted content when index is an even number.</p>
</div>
Now the problem with the code above is $index is undefined on that part of the code and I know ng-repeat will finish iterating first before going to the second div.
Thanks in advance!
This can be easily done by using ng-repeat-start and ng-repeat-end
Try like this:
<div ng-repeat-start="item in list" class="display-item">
<ng-include src="mytemplate.html"></ng-include>
</div>
<div ng-repeat-end ng-if="($index%2) == 0">
<p>An inserted content when index is an even number.</p>
</div>
#Jed, could you put a class tag on the ng-if div for an outer div? Say
<div ng-if="($index%2)" class="outer-div-you-want">
Just a thought to try.
I'm trying to show the image from the database. However, I can't put the angular variable inside the # sign of the Scala template.
<div class="col-sm-6 col-md-3" ng-repeat="product in products">
<a href="#">
<div class="thumbnail">
<img class="img-responsive" ng-src="#routes.BookStore.getImage(product.name)">
...
</div>
</a>
</div>
It gave Error: Can't find the product variable. I also tried:
<img class="img-responsive" ng-src="#routes.BookStore.getImage( {{ product.name }} )">
It still gave me the same error. How can I use the AngularJs variable inside the Scala template?
You CAN NOT that's obvious - Scala template is processed at backend side much, much earlier then it arrives to frontend. Instead your Angular app should have some method which will create a string containing path to the image literally, something like /book-store/get-image/foo.jpg and then add a route to your routes file:
GET /book-store/get-image/:fileName controllers.BookStore.getImage(fileName)
Optionally you can try to go with javascriptRoutes, but it's not necessary.
I am a beginner using AngularJS.
I would like to render a collection in my HTML code, with a specific directive: one item at left, the following one at right, the third one at left etc...
<div ng-repeat="Model in Collection">
<!-- The HTML i need for even iterations -->
<div class="col-xs-2.col-sm-2.col-md-2.col-lg-2.col-xs-offset-2.col-sm-offset-2.col-md-offset-2.col-lg-offset-2">
<img alt="Player" src="{{Model.avatar}}" popover-placement="left">
</div>
<!-- The HTML i need for odd iterations -->
<div class="col-xs-2.col-sm-2.col-md-2.col-lg-2.col-xs-offset-8.col-sm-offset-8.col-md-offset-8.col-lg-offset-8">
<img alt="Player" src="{{Model.avatar}}" popover-placement="right">
</div>
</div>
What is the better way to do that ?
You can take advantage of ng-class-odd and ng-class-even to declare the class of the divs.
<div ng-repeat="Model in Collection">
<div ng-class-even="'col-xs-2.col-sm-2.col-md-2.col-lg-2.col-xs-offset-2.col-sm-offset-2.col-md-offset-2.col-lg-offset-2'"
ng-class-odd="'col-xs-2.col-sm-2.col-md-2.col-lg-2.col-xs-offset-8.col-sm-offset-8.col-md-offset-8.col-lg-offset-8'">
<img alt="Player" src="{{Model.avatar}}" ng-class-even="'left'" ng-class-odd="'right'">
</div>
</div>
I would like to use ng-switch because I do not want the other elements that I do not want to show to be part of the DOM. That is why i did not use ng-hide/ng-show. In the example below, I would like to only have the span tag be in the DOM without the div wrappers from the ng-switch. What is the best way to accomplish this?
<div ng-switch on="user">
<div ng-switch-when="true">
<span>One</span>
</div>
<div ng-switch-when="false">
<span>Two</span>
</div>
</div>
You can use the ng-switch directive as a custom element and not specify the div in the first place. For example:
<ng-switch on="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</ng-switch>
Here is a plunker to play around with: http://plnkr.co/edit/zni6raUWOguhQh9jDiY3
the solution provided by #ChrisAuer this still creates a wrapping element.
AFAIK you'd have to use a custome directive. You may want to use angular-ui if
<div ui-if="user">
<span>One</span>
</div>
<div ui-if="!user">
<span>Two</span>
</div>
Probably, in your case, you'd be fine using ng-show or ng-hide which only hide(display:none) the element - they don't remove it form the DOM.
<div ng-show="user"> <!-- same as ng-hide="!user" -->
<span>One</span>
</div>
<div ng-hide="user"> <!-- same as ng-show="!user" -->
<span>Two</span>
</div>
I would say use ng-if, like this:
<div>
<div ng-if="user==true">
<span>One</span>
</div>
<div ng-if="user==false">
<span>Two</span>
</div>
</div>
you can use <span> to prevent your html layout changing
because <span> is not like <div>, it won't take up any space.
<span ng-switch="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</span>