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.
Related
How can I make bootstrap "jump" to the next row inside ng-repeat.
To clarify, I have something like this:
<div class=row>
<div class="col-sm-3" ng-repeat="field in fields">
</div>
</div>
What I want is to jump to the next row based on a condition inside ng-repeat. Like this:
[1][2][3]
[4][5]
[6][7][8]
The catch here is that I have to jump columns inside the column div.
Does anyone know the best way to solve this? Please tell me if my question isn't clear.
played a bit with ng-class hope that helps
its a bit confusing how bootstrap class works with angular
http://jsfiddle.net/8n9u54ud/
js:
angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
$scope.myJson = [1,2,3,4,5,6,7,8,9]
})
html:
<div ng-app='app' ng-controller='mainCtrl'>
<div class="row">
<div ng-repeat="i in myJson" ng-class="{'col-sm-4':i!=5, 'col-sm-5':i==5}">
{{i}}
</div>
</div>
</div>
UPDATED
What i'm trying to do is similiar to an accordion.
Simple put
i have an ng-repeat with an <a> tag that once clicked show another div called "Printpanel" nested inside it within ng-show.
If the user cick to another <a> tag, i want to hide all other div showed before, and open only to that one related.
I am using $index to trigger the specific div.
Here what i have done:
<div ng-repeat="product in $ctrl.Products">
<a href="#" ng-click="showDetails = $index;>CONFIGURE</a>
<div class="Printpanel ng-hide" ng-show="showDetails == $index" ng-hide="showDetails != $index">
</div>
it seems that ng-hide is not recognized... Anybody have an idea?
You don't need to use ngShow + ngHide: one is enough.
<div class="Printpanel ng-hide" ng-show="showDetails == $index">
You can use ng-if also:
<div class="Printpanel" ng-if="showDetails == $index">
EDIT:
due to scope inheritance problem, you are not able to set showDetails variable. use $parent for that.
working example:
<div ng-repeat="product in $ctrl.Products">
CONFIGURE
<div class="Printpanel" ng-if="$parent.showDetails == $index"> </div>
</div>
seems you have missed closing double quotes here ng-click="showDetails = $index;
Also either of one you need to use ng-show/ng-hide/ng-if = expression
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.
There is a panel for each contact. I want to show the remove button on a specific panel only when the user mouse over that same panel.
...
<div class="col-sm-3" ng-repeat="contact1 in Contacts">
<div class="panel panel-success" ng-mouseenter="{{contact1.id}}=true" ng-mouseleave="{{contact1.id}}=false)">
<div class="panel-heading">
REMOVE BUTTON
</div>
...
I cant get the reason why this code doesnt work.
There is 2 things in your code that can create problem. First of all, ng-show / ng-mouseneter / ng-mouseleave need an expression. So you don't need to put the {{ }}.
But it wasn't the only one problem. The fact is you were using your id to manage the show property of your item. But this expression need a boolean and you can't just erase your id with a boolean like in ng-mouseneter. To do so, you have to use an other attribute in your item, isShow for example. This will keep your id safe and you will be able to manage your view with it.
So, it give something like this :
<div class="col-sm-3" ng-repeat="contact1 in Contacts">
<div class="panel panel-success" ng-mouseenter="contact1.isShow = true" ng-mouseleave="contact1.isShow = false">
<div class="panel-heading">
REMOVE BUTTON
</div>
....
Would be nice to see a working example, but for the start the angular directives you've used require an expressions, so try removing the {{}} from ng-mouseenter, ng-mouseleave and ng-show.
So, it should be like ng-show="contact1.id".
Try applying this. Hope it works for you.
Remove the brackets from your assignment statements.
The brackets are to render a variable. Since you're assigning, instead of ng-mouseenter="{{contact1.id}}=true" you'll want to do ng-mouseenter="contact1.id=true"
You're previous code was the equivalent of writing something like null=true, or whatever value was already assigned to contact.id. The new code assigns contact.id to the value you specified.
EDIT: You can just use a local variable.
<div class="col-sm-3" ng-repeat="contact1 in Contacts">
<div class="panel panel-success" ng-mouseenter="showButton=true" ng-mouseleave="showButton=false">
<div class="panel-heading">
REMOVE BUTTON
</div>
</div>
</div>
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.