I have a Single page application that uses ngRoute to chane pages on an ng-view. The switching works well. I came into a problem where one of the html pages shown by ngview has an ngRepeat table. After reading several posts ive noticed ngrepeat cannot be used inside ngview. Any workaround?
index.html(master page)
...
<div id="main" class="container">
<div ng-view></div>
</div>
...
EventList.html (displayed by ng-view)
<div id="listView" >
<div ng-controller="EventListCtrl">
<table class="one">
<thead>
<th>EventId</th>
<th>Heading</th>
<th>EventDate</th>
<th>EventTime</th>
<th>UserId</th>
</thead>
<tbody>
<tr ng-repeat="item in items ">
<td>{{item.EventId}}</td>
</tr>
</tbody>
</table>
</div>
</div>
ng-repeat="item in items " not populating, my angular functions all work fine
Angular by default can only have 1 ng-view active at any time. You can get around this by putting your ng-view inside a div, then control the visibility of that div by using the ng-if directive.
<div ng-if="someCondition">
<ng-view></ng-view>
</div>
<div ng-if="!someCondition">
<ng-view></ng-view>
</div>
Note: having mulitple ng-views is really not recommended.
EDIT: Upon re-reading your question, I think maybe you meant using ng-repeat inside an ng-view element?
<ng-view>
<div ng-repeat="...."> </div>
</ng-view>
This should work just fine.
Related
I am new to angular and am trying a ng-repeat within a uib-accordian. And when each heading is clicked, the subsequent project will open and display its users.
But I want the first project to be open by default(that is, for the first project to be passed to expanded(project) by default)
I have tried is-open=$first. Although the first project is open the users are not shown.
<uib-accordian close-others="oneAtATime">
<div uib-accordian-group class="panel-default" ng-repeat="project in projects">
<uib-accordian-heading><span ng-click="expanded(project)">{{project.name}}</span></uib-accordian-heading>
<div ng-repeat="user in project.users">
//
</div>
</div>
</uib-accordian>
You can use is-open like this:
<uib-accordian close-others="oneAtATime">
<div is-open="($index==0)" uib-accordian-group class="panel-default" ng-repeat="project in projects">
<uib-accordian-heading><span ng-click="expanded(project)">{{project.name}}</span></uib-accordian-heading>
<div ng-repeat="user in project.users">
//
</div>
</div>
</uib-accordian>
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 working in a project where we are using Angular with ng-bootstrap and various other plugins and it's Great.
But when using ng-repeat inside a ng-template for some popover content, the placement of the popover gets wonky.
<script id="broken.html" type="text/ng-template">
<div>
<table class="table table-condensed table-popover">
<tbody ng-repeat="a in test">
<tr>
<th>test</th>
<td>aaa</td>
</tr>
</tbody>
</table>
</div>
</script>
Plunker example.
The "Broken" button that uses ng-repeat spwans a popup that is too far down. While the "Works" button that has the table hard coded works as intended.
Does anyone have an idea of how one might fix this problem?
Best regards, Fredrik
If I have two <div ng-view></div> elements on the same page, angular.js only uses the first one. I am looking to have two templates (with two controllers and two partials) rendered on the same page, how do I do that? The code below does not work but I'd like to have something along these lines.
<div class="row">
<div class="large-6 small-12 columns">
<div ng-controller="SitesHomeCtrl" >
<div ng-view>
</div>
</div>
</div>
<div class="large-6 small-12 columns">
<div ng-controller="UsersMeetCtrl" >
</div>
</div>
</div>
ui-router is the best option but if you are going with $routeProvider, you could use ng-include (with ng-show/ng-hide) or ng-switch to achieve the same.
I imagine you're probably going to want to look at ui-router in place of angular's router at this point, as angular's router does not support multiple ng-view elements.
updated: made a smaller poc, in plunkr to show the problem without the entire application around it.
see it here
issue: data-ng-switch works on inline content, but does not remove the previous element when switching using external templates via data-ng-include.
works
<div data-ng-switch="view">
<div data-ng-switch-when="template1">content 1</div>
<div data-ng-switch-when="template2">content 2</div>
</div>
doesn't work
<div data-ng-switch="view">
<div data-ng-switch-when="template1" data-ng-include="'template1.html'"></div>
<div data-ng-switch-when="template2" data-ng-include="'template2.html'"></div>
</div>
Best solution I currently found can be seen in the plunkr
you basically cannot use ng-include on the same dom level as the ng-switch anymore. The same goes for other logical directives like ng-show ng-hide...
adding the ng-include on a child node of the ng-switch-when element works:
<div data-ng-switch="view">
<div data-ng-switch-when="template1">
<div data-ng-include="'template1.html'"></div>
</div>
<div data-ng-switch-when="template2">
<div data-ng-include="'template2.html'"></div>
</div>
</div>
update
Should be fixed in .rc3!
This was confirmed as a bug in the angular rc2 version (confirmation in this google group discussion).
The actual bugticket can be found here.