ng-repeat is very useful, however I am finding my application needing dynamic insertion of ng-repeats
Is it possible to insert html dynamically into the view from one of the javascript controllers?
Alright; my specific use-case is the following:
I have a nested ng-repeat in my view:
<div id="sunti_grid">
<div class="sunti_contain" ng-repeat="sunti in showable_suntis track by $index">
<div class="individual_sunti" ng-click="descendents(sunti.short_id); update_ancestor(sunti);" ng-dblclick="update_ancestor(null);" ng-class="{active_sunti : actively_selected_sunti == sunti.short_id}">
<div class="sunti_content" ng-bind="sunti.content"></div>
<div class="sunti_tags" ng-bind="sunti.tags"></div>
<div class="sunti_author" ng-bind="sunti.author"></div>
<div class="sunti_shortid" ng-bind="sunti.short_id"></div>
<div class="sunti_ancestor" ng-bind="sunti.ancestor"></div>
<div class='rating_contain' ng-show="is_user_authenticated">
</div>
</div>
<div class="sunti_reply_carriage_wrapper" ng-if="descendents(sunti.short_id).length > 0">
<div class="sunti_reply_carriage">
<div class="individual_sunti reply_carriage_sunti" ng-repeat="descendent in descendents(sunti.short_id)">
<div class="sunti_content" ng-bind="descendent.content"></div>
<div class="sunti_tags" ng-bind="descendent.tags"></div>
<div class="sunti_author" ng-bind="descendent.author"></div>
<div class="sunti_shortid" ng-bind="descendent.short_id"></div>
<div class='rating_contain' ng-show="is_user_authenticated">
</div>
</div>
</div>
</div>
</div>
</div>
So basically, sunti_grid has an ng-repeat that makes a long list of suntis and each sunti can have descendents. The descendents appear in a "carriage" that manifests immediately below the given sunti.
Now, when a user clicks on a descendent (kinda like a magically-appearing row-drop-down) I want to inject yet another carriage.
Here is a simple schematic to illustrate the feature so far:
[sunti]
[sunti]
[sunti]
[d][d][d][d][d]..
[sunti]
[sunti]
[d][d][d][d][d][d]...
Now I want to be able to inject another carriage of descendents for each descendent-row.. kinda like
[sunti]
[sunti]
[d][D][d][d][d][d]...
[D2][D2][D2][D2]...
[D3][D3][D3]...
so clicking on [D] would make the [D2] row appear, and clicking on one of the [D2]s would make row [D3] appear...
The only thing I can think of so far is to use the controller to inject a new ng-repeat for every new descendent row.
Suggestions welcome. What would be a good (read: maintainable) way of dynamically inserting ngRepeats?
Related
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>
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>
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.
My index.html page is like as follows:
<div id="sidepanel" data-ng-controller="ListCtrl">
<li data-ng-repeat="record in records">
{{record.id}}
<input type="checkbox" data-ng-model="addwidget">
</li>
</div>
<div id="main">
<div data-ng-view></div>
</div>
for this data-ng-view i have another page recordlist.html in that i have following code:
<div data-ng-controller="ListCtrl">
<ul class="design">
<li data-ng-repeat="record in records">
<div data-ng-switch data-on="record.category">
<div data-ng-switch-when="reporting1">
<div id="{{record.id}}" data-ng-show="addwidget">{{record.description}}</div>
</div>
<div data-ng-switch-when="reporting2">
<div id="{{record.id}}" data-ng-hide="addwidget">{{record.description}}</div>
</div>
</li>
</ul>
</div>
My question is i want to show the first div when i check the checkbox & when i uncheck it i want to show the second div.When both of the data-ng-model & data-ng-hide/show are on the same page then it works fine but in my case it present on two different pages.
Is it correct ? How can i implement this. Need Help.Thanks.
The problem is that you are setting addwidget in the first controller, but is trying to use it in the second. Controllers are not singletons.
So, in this situation:
<div id="sidepanel" data-ng-controller="ListCtrl">
...
</div>
<div id="main">
<div data-ng-view>
<div data-ng-controller="ListCtrl">
</div>
</div>
</div>
You got two separated controllers and scopes. And you are setting addwidget in the first trying to read in the second.
You can either bind it to the root scope $root.addwidget or use a service share to the states.
As you have many records, binding directly to root is a problem, as all of them are going to share the same state. So you gonna need an object in the rootScope and bind the option by id $root.addwidget[record.id]. Made a pretty simplified modification here.
I've just started working on a project that requires me to learn AngularJS. What I'm trying to do is create two menus that slide into the screen, one from the left, one from the right. When they do this they push the content over.
Currently I can get one or the other to work, but not both. I realize this is because of the way that I'm defining the ng-class. I just can't quite conceptualize how to do it correctly.
<div ng-class="{true:'slide-left', false:''}[toggleSlide]" class="container">
<div class="content">
<button ng-click="toggleSlide = !toggleSlide" class="btn-left">From Left</button>
<button ng-click="toggleSlide = !toggleSlide" class="btn-right">From Right</button>
</div>
<div class="slide-from-left">
<p>Here is information that slides from off screen left.</p>
</div>
<div class="slide-from-right">
<p>Here is information that slides from off screen right.</p>
</div>
</div>
Set up the ng-class syntax like this for what you want:
<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container">
Also, I'm guessing you were trying to adapt your code to something else you saw, so I'll offer something on that also. Here's an ng-class using ng-repeat's $index to dole out classes for even and odd:
ng-class="['even', 'odd'][$index % 2]"