Hi guys I continue with my code and I have a problem that someone can maybe help me to fix it.
I'm using UI Bootstrap with angular and thymeleaf and I have problems to comunicate each. I want this:
So this table is loading dynamic from Thymeleaf but the name provider need to change.
Here is the code:
<accordion-group heading="{{providerGroup}}" th:attr="ng-repeat=\''+ providerGroup in ${#provider.getProviders().keySet()}+'\')'">
{{providerName}}
</accordion-group>
everything is working fine except that I dont know why thymeleaf dont read it.
Any help?
<accordion close-others="oneAtATime">
<li th:each="provider : ${#provider.getProviders().keySet()}">
<accordion-group th:attr="heading=${provider}" ng-model="providerSelected">
{{providerSelected}}
<button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</accordion-group>
</li>
</accordion>
Enjoy it!
Related
I want to use the bootstrap dropdown from the angular ui lib.
I'm getting an issue when I append the dropdown to another DOM element with dropdown-append-to (even dropdown-append-to-body is not working).
I can't have it working only when I use is-open with ng-click to trigger the dropdown.
I reproduced the issue in this plunker.
I'm using bootstrap 3.3.6, angular ui 2.1.3 and angular 1.5.8.
Hope somebody can help me.
You should work with uib-dropdown-toggle and also add an ng-click and toggle test at your controller
Also, dropdown-append-to-body should accept a value (default is false), like so dropdown-append-to-body="true"
<div class="btn-group" uib-dropdown dropdown-append-to-body="true" is-open="test">
<button type="button" ng-click="onClick(test)" class="btn btn-primary" uib-dropdown-toggle>
Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
<!-- list items -->
</ul>
</div>
exmaple plunk
If anyone can help, I'd be very thankful. I am pretty new to AngularJS and trying to learn it. The problem I got is that one of controllers are not called when button Bought is pressed
<div class="col-md-6" ng-controller="AlreadyBoughtController as Items">
<h2>Already Bought:</h2>
<ul ng-repeat="bought in Items.ItemsBought track by $index">
<li>Bought {{bought.quantity}} {{bought.name}}</li>
</ul>
<div class="emptyMessage" ng-if="Items.ItemsBought.length === 0">Nothing bought yet.</div>
</div>.
Please look complete code with app.js file on plunker:
http://plnkr.co/edit/8wKY7PPZ6mINsFGCJQfP?p=preview
That's because you were never actually passing the index of the item you bought.
<li>Buy {{item.quantity}} {{item.name}} <button class="btn btn-default" ng-click="itemsToBuy.boughtItems($index);"><span class="glyphicon glyphicon-ok"></span> Bought</button></li>
Pass $index to your function: ng-click="itemsToBuy.boughtItems($index);
Take a look at the fixed plunk.
My Code is given below . Please check and reply .
Thanks
<div ng-repeat="(x, y) in items">
<a class="btn tooltipped" data-position="bottom" data-delay="50" data- tooltip="I am tooltip">Hover me!</a>
</div>
I tested your code and everything works fine when I removed the spaces in data-tooltip attribute.
<a class="btn tooltipped" data-position="bottom" data-delay="50" data- tooltip="I am tooltip">Hover me!</a>
----------------------------------------------------------------------^^^^
Did you initialize the tooltip before your content has been loaded? If so, you should initialize it after the render of items data. Otherwise there will be no .tooltiped DOM to be initialized.
We've got the following HTML:
<div class="btn-group search-dropdown" dropdown is-open="gender.isopen">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
{{sex_temp=='F'?'Female':'Male'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-class="{'dropdown-selected':sex_temp=='F'}">
<a ng-click="sex_temp='F'">Female</a>
</li>
<li ng-class="{'dropdown-selected':sex_temp=='M'}">
<a ng-click="sex_temp='M'">Male</a>
</li>
</ul>
</div>
In the console, we're getting the following error:
Error: setIsOpen is not a function #http://127.0.0.1/lib/bootstrap-ui/ui-bootstrap-tpls-0.12.1.js:1734:5
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://127.0.0.1/lib/AngularJS/angular.js:12406:23
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://127.0.0.1/lib/AngularJS/angular.js:12679:13
done#http://127.0.0.1/lib/AngularJS/angular.js:8279:34
completeRequest#http://127.0.0.1/lib/AngularJS/angular.js:8484:7
createHttpBackend/</xhr.onreadystatechange#http://127.0.0.1/lib/AngularJS/angular.js:8423:1 #debugger eval code:1:1
consoleLog/<#http://127.0.0.1/lib/AngularJS/angular.js:10062:18
$ExceptionHandlerProvider/this.$get</<#http://127.0.0.1/lib/AngularJS/angular.js:7363:7
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://127.0.0.1/lib/AngularJS/angular.js:12426:19
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://127.0.0.1/lib/AngularJS/angular.js:12679:13
done#http://127.0.0.1/lib/AngularJS/angular.js:8279:34
completeRequest#http://127.0.0.1/lib/AngularJS/angular.js:8484:7
createHttpBackend/</xhr.onreadystatechange#http://127.0.0.1/lib/AngularJS/angular.js:8423:1
We're using ui-bootstrap-tpls-0.12.1.js
I have tried adding $scope.gender={isopen:false} but that didn't help.
Any idea on what might be the problem here? The dropdown is working perfectly. I just want to get rid of these errors in the console.
I had the same issue, I believe it has something to do with the overlap of bootstrap's drop-down. Try removing the "dropdown-toggle" class from your button.
In my case it helped to simply remove the is-open attribute.
This is 2 years later, but updating your ui-bootstrap would fix this problem if you're using an older version (example 0.13 instead of 2.5)
The way accordion is built is one accordion below another
I want to be able to make them side by side.
I have a button that will open/close everyone at once.
I tried adding a span above the accordion-group but it didn't help.
<div id="top-panel" style="height:auto;border-bottom-style: outset;">
<accordion close-others="false">
<span ng-repeat="widget in _widgets">
<accordion-group id="widgetsAccordion" heading="{{widget.name}}" is-open="widget.isOpen">
moo
<button ng-click="getPreviewContent('{{widget.postId}}')">{{widget.name}}</button>
</accordion-group>
</span>
</accordion>
</div>
<div id="bottom-panel">
<div id="feed-panel" style="height:580px;width:1075px; float: left;border-right-style:outset;">
<button class="btn btn-primary" ng-click="toggleCollapse()">collapse</button>
</div>
<div id="preview-panel" style='float:right; width:570px;'>
<ng-include src="htmlInclude" />
</div>
</div>
How can I achieve this?
[edit]:
I realize I might not have explained this correctly.
I want the accordions to be VERTICAL, but just for them to be located side-by-side
[solution]:
Well the solution was pretty simple, just added style="display:inline-block" to the accordion-group. cheers
Well the solution was pretty simple, just added
style="display:inline-block" to the accordion-group.
cheers
I have come across a plugin called zAccordian.
http://www.armagost.com/zaccordion/
It is a horizontal accrodian, i think this should suffice for your needs.
If you would like to have that all tabs open with one click, there is a start parameter that can be passed through. Not sure how familiar you are with JQuery but this should do the trick.
Regards,
Warren