It looks as though data-ng-hide works as expected except that it puts a space where the value would be shown. Is there a way to surpress that space so the values which should be shown are shifted to the right. For instance my loop has three people in it, but on the third person will be shown. The name for that person is to the far right rather than the first column on the left. I can't use data-ng-if as it removes values from the array.
This is the code:
<div class="row">
<label class="col-md-3" style="text-align: center">Checked Out to:</label>
<div class="col-md-8" ng-repeat="rows in chunkedData">
<div class="col-xs-4" ng-repeat="route in rows">
<span data-ng-hide="!route.checkedOut">{{route.user.firstName}} {{route.user.lastName}}</span>
</div>
</div>
</div>
This is the normal behavior: You're repeating a <div> that has the class "col-xs-4".
The ng-hide is inside it, meaning that for each route in rows, you'll display a column with or without text in it.
Try this instead :
<div class="col-xs-4" ng-repeat="route in rows | filter:{checkedOut:true}">
{{route.user.firstName}} {{route.user.lastName}}
</div>
AngularJS's documentation on ngRepeat and filters could also help you to better understand filters.
Related
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 have a very simple thing I am trying to do. The ng-click is not working. Any ideas why? Is there a problem with divs that are embedded in another div or am I just too sleepy? That item affected is not included in the code below, but no event is ever registered with the click.
<div ng-switch-when="3" ng-mouseenter="showIcons=true" ng-mouseleave="showIcons=false">
<div ng-if="editPerm" ng-show="showIcons" class="icon_holder" style="width: {{obj.mainwidth}}px;">
<div class="deletebutton"></div>
<div ng-click="equationShow=!equationShow" class="equationspecs"></div>
</div>
<div class="equationBlock">
<div class="eqshow" id="{{obj.itemid}}" ng-show="!obj.showEdit" ng-dblclick="obj.showEdit=!obj.showEdit">
<span mathjax-bind="obj.data.Format_left"></span>=
<span mathjax-bind="obj.data.Format_showequation"></span>=
<span mathjax-bind="obj.data.Format_showsolution"></span>
</div>
If you were able to click on a div with no content in it (sometimes a hard thing to do!), it would simply invert the value of equationShow on the scope.
But that would produce no visible difference. From what I can see in your example, the value of equationShow isn't being used in any way.
Based on your comment, you've probably got a problem with variable scoping.
If, for instance, you did something like this, it'd be more likely to work:
<div ng-init="myVariable = false">
<div ng-if="!myVariable">
<div ng-click="$parent.myVariable = !$parent.myVariable">Show the other div</div>
</div>
<div ng-if="myVariable">
Showing this div
</div>
</div>
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'm trying to filter an user list. I'm using a custom Bootstrap version and want to display a 4 columns table.
So far, I've the following code:
<div ng-repeat="user in users | filter:searchValue | orderBy: 'username'">
<span ng-switch on="$index % 4">
<span ng-switch-when="0">
<div class="row-fluid">
<div class="span3" ng-if="users[$index+0]">
<user-item ng-model="users[$index+0]" on-click="showUser(userId)"></user-item>
</div>
<div class="span3" ng-if="users[$index+1]">
<user-item ng-model="users[$index+1]" on-click="showUser(userId)"></user-item>
</div>
<div class="span3" ng-if="users[$index+2]">
<user-item ng-model="users[$index+2]" on-click="showUser(userId)"></user-item>
</div>
<div class="span3" ng-if="users[$index+3]">
<user-item ng-model="users[$index+3]" on-click="showUser(userId)"></user-item>
</div>
</div>
</span>
</span>
</div>
So far, it works perfectly when there is no filter set.
When I set a searchValue, the $index cannot display the correct value (It will always start from 0 to the lengh of the filtered array).
My question is: Is there a way to correctly display the results in a 4-cols table and to filter the result ?
I don't think you need to add conditions in order to create a 4 column table using bootstrap css, simply use ng-repeat in a col-* element or using your custom span class (which I assume is created using bootstrap's mixins to create rows and columns).
DEMO
HTML
<input ng-model="searchValue.username" />
<div class="row-fluid">
<!-- simply change col-xs-3 to span3 -->
<div class="col-xs-3" ng-repeat="user in users | filter:searchValue | orderBy: 'username'">
{{user.username}}
<user-item ng-model="user" on-click="showUser(user.id)"></user-item>
</div>
</div>
If the markup above does not work in your case because of the custom bootstrap that you're using, then you are probably better off with a filter that partitions your current array into sections of subarrays that represents a row-column relationship, answered by m59 in this SO Answer.
Next time try to give a shot to ngTasty table http://zizzamia.com/ng-tasty/directive/table it's based to bootstrap css table :)
i repeat things in ng repeat like so
<div class="" ng-repeat="deutscheBankEvent in deutscheBankEvents">
<div class="schrottler-opened schrottler" title="">
<span class="presse_ueber" style="font-size:22px;margin-left:10px;font-weight: normal;margin-top:5px">{{deutscheBankEvent.name}}</span>
</div>
<!-- data-ng-repeat also possible-->
<div class="">
<div class="presse_content">
<Div style="color:white">{{deutscheBankEvent.name}}</div>
<ul class="liste_k">
<li ng-repeat="list in deutscheBankEvent.list">
{{list}}
</li>
</ul>
</div>
</div>
later down the code comes up a form to register to events. the form is hidden until user selects a place and date via select. this is triggered like so:
<span ng-show="myForm.locationDate.$valid">
my issue now is: this shows up all hidden form elements when one select is valid.
how can i set the scope to only this one changed?
Since ng-repeat creates a new scope, changing ng-show/ng-hide conditions to scope bound properties will work perfectly (example).