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
Related
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.
I have used ng-repeat numerous times already in the past, but for some reason I cannot yet understand why it is not on the following situation:
I have an array of objects called registers which I am referencing on the ng-repeat but nothing happens.
I know the array is populated because I have seen it on numerous console.log and because it works if I move the ng-repeat over to the <tbody>
<div ng-repeat = "r in registers">
<!-- START HEADER -->
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Denise Watson</td>
</tr>
</tbody> <!-- END HEADER -->
<tbody>
<tr>
<td class="text-center"></td>
<td>
<!-- Summernote Container -->
<div class="js-summernote-air">
<p>End of air-mode area!</p>
</div>
</td>
</tr>
</tbody>
<!-- END TABLE -->
</div>
I was hoping someone could tell me if there is something I may be ignoring.
Thanks in advance.
I think I just ran into this same problem. It stems from <div> not being a valid elment within a <table>.
I'm guessing that since you have <tbody> there, that there is a <table> tag that was left out of your snippet. <div>s aren't allowed in a table, so the browser moves it before the table. In my situation, doing this, causes the angular scope to change so that there was nothing to iterate over. You can verify this by using the developer tools of your browser.
So, my guess is that you probably want to move the ng-repeat onto the <tbody> or <table> tag.
If you want to use ng-repeat in "div" tag means use "span"
inside div tag. instead of using "table" and its sub attributes..
else use your ng-repeat inside "table" or "thead" or "tr" also
it will iterate rows ...
than only ng-repeat will works.
I am using ui-bootstrap for accordian, I have included ui.bootstrap in app.js. I am getting this error -
Controller 'accordion', required by directive 'accordionGroup', can't be found!
Here is the code I am using -
<accordian close-others="oneAtATime">
<accordion-group is-open="false" heading="Requests">
<div ng-repeat="">
< accordion-group heading="">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>H</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="" ng-init="inner=$index">
<td>{{}}</td>
<td>{{}}</td>
</tr>
</tbody>
</table>
</accordion-group>
</div>
</accordion-group>
</accordian>
<accordian close-others="oneAtATime">
^
You got a typo here
I am assuming that you have not made any syntax/spelling mistakes. If you still get the same error, then probably it has something to do with your dependencies. Make sure you have included the right files.
And for ui-bootstrap dependency, "accordion" is a template, so you have to include src = "ui-bootstrap-tpls.js" and not "ui-bootstrap.js". Hope this helps
I see from the sample code you posted there are some decrependacies in the spelling of your element tags, accordion and accordian have you checked these? Is that not the possble issue here? I'm using accordion without any issues myself in my current project.
I tried to copy some code over from jsfiddle to plunkr. I've got it almost working at plunkr, except for the last ng-repeat (the one with timeslot):
<div ng-controller="taskViewCtrl">
<table style="width:auto;" class="table table-bordered">
<tbody ng-model="subtasks">
<tr ng-repeat="subtask in subtasks" class="item" style="cursor: move;">
<td>{{$index}} Worker {{subtask.workerId}}</td>
<td ng-repeat="timeslot in subtask.subtaskArray">{{timeslot}}</td>
</tr>
</tbody>
</table>
</div>
jsfiddle: http://jsfiddle.net/frodefi/dJrG7/17/
plunkr: http://plnkr.co/edit/0IdwZCowqOGp4lco7V90?p=preview
They use two different Angular versions (1.02 vs 1.2.7), but I am sure the problem is not there. Most probably I have made a mistake somewhere, but where?
We are using ExtJS4 in our application. We have a problem with grid focus.We are using grid.getView().focusEl.focus() in ExtJS3. Now it seems that this is not working.What is the replacement for this one in ExtJS4.
I have helped you checked on the differences in ExtJS3 and ExtJS4, the major changes is the focusEl has been removed from the gridView element.
In ExtJS3, focusEl is the anchor link in the view
<div class="x-grid3-scroller" id="ext-gen10" style="width: 298px; height: 174px; ">
<div class="x-grid3-body" style="width:100px;" id="ext-gen12">
<div class="x-grid3-row x-grid3-row-first x-grid3-row-last" style="width:100px;">
<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:100px;">
<tbody>
<tr><td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 100px;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on">0</div></td></tr>
</tbody>
</table>
</div>
</div>
</div>
In ExtJS4, this anchor link doesn't exist
Solution
This is a small fiddle test I have created for you. Basically what you need to change is as follow:
grid.getView().el.focus();
Instead of getting the focusEl (an anchor link), we use the whole element.
Hope this solve your problem.