I'm building a large input form in angular. To make the application user friendly I have broken the form down into many different sections. I need each section to reside within a different group of an accordion. Each section needs to have validation and a user cannot progress until the required field validation has been satisfied.
In the main page of the app I have added the markup for the accordion. Each section within the accordion is a custom directive. The directive contains the markup for each group (The input form and validation) and it also contains the code to connect to the relevant services to persist state within a db.
Sample code
<uib-accordion close-others="true">
<uib-accordion-group heading="Person Details" is-open="heading1.isOpen">
<div person-details></div>
<button class="btn btn-default btn-sm pull-right" ng-click="heading2.isOpen = !heading2.isOpen">Next <i class="glyphicon glyphicon-chevron-right"></i></button>
</uib-accordion-group>
<uib-accordion-group heading="Address Details" is-open="heading2.isOpen">
<div address-details></div>
<button class="btn btn-default btn-sm pull-right">Next <i class="glyphicon glyphicon-chevron-right"></i></button>
</uib-accordion-group>
</uib-accordion>
The difficulty is how to manage what accordion group is open at any time. In the example code above I have a next button to open the next accordion group. However this button needs to reside with the directives themselves in order to manage validation. The problem with this is that the directives then need to know how to control the accordion in order to change the active accordion group - bubble up somehow.
Does anybody have any thoughts on this please? If you think I am going about this is the wrong way please let me know.
Thanks
You need to use a scope variable in your directive(s) that has a two way binding to heading1.isOpen for example. That way the directive will be able to modify the is-open state of its parent directive.
Just search angular docs for directives and isolated scope variables.
Related
I wanted uibTooltip directive instead of native title HTML atribute. Then, I got a directive that provides an automatic permutation of attributes before compiling.
The troubles are in ngRepeat directives if tag with affected attributes is inside.
You can see it here (a JSFiddle testing example).
because this directive use terminal and when you use button inside <li>
<li><button type="button" ng-repeat="btn in vm.buttons" class="btn btn-default" title="Add" ng-click="vm.add()"><span class="glyphicon glyphicon-plus"></span></button></li>
this link is well explained about terminal and priority.
Here is a solution! It is success if we compile inside postLink function.
I have an Angular application using (UI) Bootstrap and I'm displaying a URL in a modal-body inside well and code elements. The modal-footer just has a Close button. Now if one triple-clicks the URL to copy it, the Close button text in the footer is also selected and one can not paste it to another tab as usual.
Fiddle here
<div class="modal-body">
<div class="well">
<code>http://www.google.com/</code>
</div>
</div>
<div class="modal-footer">
<button type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
I have searched a lot but cannot come up with a solution (have tried CSS's user-select, wrapping it in different elements, which do not seem to work).
Replace <button> by <input> to disable text selection:
<input type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal" value="Close"></input>
Updated Fiddle
Not exactly a scientific or technical answer (as I don't fully grasp the browser's Selection API); but what I have observed is that when you triple click the last child element in a DOM branch, it creates a hanging selection (for lack of a better term).
By hanging selection, I mean that it tries to look for the next selectable text element, but since it's the last child that was selected, it traverses the DOM to find the next text element. In my specific case, I was dealing with something like this:
<div>
<h2>Section Header</h2>
<div>
<p>foo</p>
<p>bar</p><!-- triple clicking this would select the next h2 content!! -->
</div>
</div>
<div>
<h2>Next Section Header</h2>
...
</div>
The solution I arrived at came from the naive thought of "give it something else to select" so that it wouldn't go looking elsewhere in the DOM. So this definitely feels more like a hacky workaround, but simply inserting 0-height <br> elements (so as not not affect the existing layout) immediately after any content that I expect users may try to triple click solved all of my issues.
So in OP's case
<div class="modal-body">
<div class="well">
<code>http://www.google.com/</code>
<div style="line-height: 0px;"><!-- line-height is what affects br height, and you can't apply line-height directly on br tags for whatever reason -->
<br />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" ng-click="close()" class="btn btn-primary" data- dismiss="modal">Close</button>
</div>
At the time of posting this, there isn't much info about these types of issues so I figured I would share what worked for me in hopes that it helps someone else.
One good source of info I did find was in the form of a github issue comment here
It turns out there are a bunch of ways to cause hanging selections (because of the nature of the functionality I'm building, I could only verify that my solution works for #1 and #4):
triple-click on a paragraph
place the cursor at the beginning of a paragraph, shift-arrow-down past the end of the paragraph
place the cursor at the beginning of a paragraph, shift-arrow-right to the end of the paragraph (selects the text within the paragraph), then shift-arrow-right again (selects the whole paragraph)
drag the cursor from the beginning of a paragraph to the end (selects the text within the paragraph), then drag a little further / down (selects the whole paragraph)
I have an Angular Formly form inside an ng-repeat. I've got everything working as I would expect except for the reset button. For some reason clicking any reset button always resets the last form, not the one it's supposed to. Submitting and updateInitialValue() seem to work fine.
<div ng-repeat="model in vm.models">
Here is the form declaration inside the repeat:
<formly-form model="model" fields="vm.fields" options="vm.options[$index]" form="vm.form[$index]">
And here is the reset button.
<button type="button" class="btn btn-default" ng-click="vm.options[$index].resetModel()">Reset</button>
Here is the whole thing in a fiddle.
http://jsbin.com/feguvulumo/edit?html,js,output
Thanks in advance for any help you can give!
I figured this out with some help from #kentcdodds on the Formly gitter chat (https://gitter.im/formly-js/angular-formly)
He suggested that the issue was that the repeating forms are sharing the same field configuration.
To fix it, I implemented a function that was called by an ng-init inside the ng-repeat. It builds up an array of fields objects as it loops.
function addFields() {
vm.fields.push(new getFields());
}
I then changed the fields property on the <formly-form> like so
<formly-form model="model" fields="vm.fields[$index]" options="vm.options[$index]" form="vm.form[$index]">
Full solution
http://jsbin.com/yanopeyija/1/edit?html,js,output
I am also new to angular, but generally this could be achieved if we change the button type as reset :
<button type="reset" >
I am trying to switch from Smart-Table version 1.x to Angular ui-grid (version 3.0), the replacement for ng-grid.
I like nearly everything about ui-grid, but one thing is driving me crazy. In smart-table, there is a value for dataRow, which is a convenient way of referencing the entity within a table.
What I was using it for was populating an html template to include field information from the entity, something like ng-click="$parentScope.edit(dataRow.id)" within the html template placed within a grid cell.
However, in ui-grid, I can't seem to access the entity object without making a formal row or cell selection. Any effort to include it in a cell template results in an object, (row.entity) but I cannot access any of the entity elements, they show up as undefined. Any ideas?
Furthermore, I have been able to execute a method in an html template, but only ones with no parameters, not one trying to use a parameter from the entity itself.
Here is my html template that was working with smart-table:
<a data-toggle="tooltip" data-placement="top" title="View {{filteredRowCollection}}" ng-click="$parent.$parent.$parent.$parent.view(dataRow.id)"
class="glyphicon glyphicon-camera green">
</a>
<a data-toggle="tooltip" data-placement="top" title="Edit {{selectionId}}" ng-click="grid.appScope.edit(row.entity.id)"
class="glyphicon glyphicon-pencil blue">
</a>
<a data-toggle="tooltip" data-placement="top" title="Delete {{selectionId}}" ng-click="$parent.$parent.$parent.$parent.delete(dataRow.id)"
class="glyphicon glyphicon-trash red">
</a>
I was trying to use something like this with ui-grid:
function edit(row){
. . .
};
row, at this point is an object, as is row.entity. I expected to be able to use something like row.entity.id, one of the fields, but it is undefined.
This post can be useful, https://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/
Basically, you need to set External scope for your grid, so that you can access data.
I am using angular ui drop down element
<div class="dropdown" >
<a ng-click="getTypes();" dropdown-toggle> Add a Type</a>
<ul class="dropdown-menu">
<li ng-repeat="type in Types"><a><b>{{type.sType }}:</b><em>{{type.sDescription}}</em></a> </li>
</ul>
</div>
all that i do is call a web service and populate Types all works fine! But when i add the above code in my htm the div below it starts throwing the exception of max digest reached.
the div below the drop down code(as written above) simply consists of few editable segments with icons and their visibility is controlled by ng-show and ng-hide when the use click a button
say on click of 1st segment i set a variable to true by using ng-click and depending on this variable i show or hide segments by using ng-show and ng-hide
so my doubt is that without the drop down code written above my ng-show and ng-hide work completely fine but the moment i try to use the drop down directive of angular ui i start getting this exception when i click on the buttons . please help.
Edit below is the code which follows basically user clicks on icons to reorder the elements that are appearing in the ng-repeat list and from the drop down which is above the user can add elements to this list
<ul class="repeatList text-center">
<li ng-repeat="widgets in leftWidgets" widget widgets="widgets"
class="wArea">
<a href="" class="icon-remove-circle pull-right" ng-show="editMode" ng-click="deleteWidget(leftWidgets);"
title="Delete Widget">
</a>
<a href="" class="icon-chevron-up slideUpIcon" ng-click="shiftUp(widgets,leftWidgets);"
ng-show="editMode">
</a >
<a href="" class="icon-chevron-down slideDownIcon" ng-click="shiftDown(widgets,leftWidgets);"
ng-show="editMode">
</a>
</li>
</ul>
kept doing hit and trial and found that using empty anchor tags was causing the problem. i.e. i had attached ng-click events to
text //empty href
the moment i changed them to span all worked fine! dont know why the empty "a" tags caused the problem but it will be great if any one can shed some light on the reasons for the above run time angular js exception. the link below is a useful
How to Troubleshoot Angular "10 $digest() iterations reached" Error
thanks!