I'm quite happy with the Angular UI Bootstrap Accordion, but I encountered a problem when creating a Accordion Group with no body. The Accordion will always create an empty body and I couldn't find a way to prevent this. Is there a way to prevent the creation of the accordion body or can the accordion group be created in a way that it is not expandable?
Plunker with example
Accordion Directive
The accordion directive builds on top of the collapse directive to
provide a list of items, with collapsible bodies that are collapsed or
expanded by clicking on the item's header.
As I stated in the comment, just use the Collapse directive and style it like an accordion.
Update:
Not styled to perfection but try this
HTML
<div ng-controller="CollapseDemoCtrl">
<div class="accordion-group" ng-click="isCollapsed = !isCollapsed">
<div class="accordion-heading">
<a class="accordion-toggle">Group with body</a>
</div>
</div>
<div collapse="!isCollapsed" class="collapse">
<div class="well well-large">Some content</div>
</div>
</div>
Controller
function CollapseDemoCtrl($scope) {
$scope.isCollapsed = false;
}
plunkr
Related
On the process of trying to learn angularjs, I am creating a set of divs using ng-repeat. I have five divs in all. I am only displaying the first div using $firstdirective component.
<div class="container" ng-app="demoApp" ng-controller="demoController">
<div class="row" ng-repeat="job in jobs" ng-hide="!$first">
<div class="col-md-4">
{{job}}
</div>
<div class="col-md-4">
<button class="btn-primary btn-xs add" ng-click="showNext($event)" ng-hide="$last">Add</button>
<button class="btn-primary btn-xs delete" style="display: none;">Delete</button>
</div>
</div>
</div>
That works.
Now, each div has two buttons, Add and Delete. When I click add I want to hide the add button and delete button of the current row and open the next row. So I wrote,
$scope.showNext = function(evt) {
var elm = evt.target;
$(elm).hide();
$(elm).next().hide();
$(elm).closest("div.row").next().slideDown();
};
This is not working as ng-hide is overriding my slideDown. What is the angularjs way of doing it?
Also I would like the delete button only on the $last visible row && !first. How to find last visible row in ng-repeat?
Fiddle: https://jsfiddle.net/codeandcloud/u4penpxw/
You shouldn't manipulate the DOM with things like $(elm).hide();, you should use ng-class= to let Angular add classes that hide or show the elements. If you switch your ng-repeat to ng-repeat="job in jobs track by $index", you could write something like that in your showNext()-function:
$scope.showNext = function(index) {
$scope.currentJob = $scope.jobs[index]
}
and call it like ng-click="showNext($index) - of course you'd need to do some refactoring as well. But then you could write something like ng-class="{hidden: (job == currentJob}" to hide all buttons except in the current row.
There's a lot of good thoughts in this q&a: "Thinking in AngularJS" if I have a jQuery background?
http://plnkr.co/edit/vmKoBHEKq0wP3du7gtps?p=preview
I want to write directive for hide submenu on click but it is not working properly.
Hover click on menu, Submenu are display but click on submenu I cannot manage hide all submenu
I'm not sure if you really need a directive for doing this. If you don't, you could use simply 'ng-hide' and 'ng-click' directives to make this works.
In the element you want to hide, put ng-hide="hideSubmenu" and in the element who will hide it, put a ng-click="hideSubmenu = true".
In your code:
<body ng-controller="MainCtrl">
<p>Hello name {{name}}!</p>
<div>
<div class="col-md-1" style="padding-left: 00px;padding-right: 350px">
<div class="cssmenu" ng-hide="hideSubmenu">
...
<li>Type</li>
<li>Request</li>
...
</div>
</div>
</div>
</body>
I'm trying to build a directive which will display a kendo window with a kendo tab strip in its body content.
It's a component I need to be reusable since I use it a lot in my web app.
Here is the flat html representation that I want to turn into a directive
<div style="padding:20px;" kendo-window="test" id="test" k-title="hello" k-options="popupOptions">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">View</li>
<li>Edit</li>
</ul>
<div style="padding: 1em">
This is the view tab
</div>
<div style="padding: 1em">
This is the edit tab
</div>
</div>
</div>
1) First step is creating the directive that wraps the kendo popup and this si where I'm having an issue
So basically, my directive includes the kendo-window widget in its template and has transclude="true", since the content of the popup will different each time.
It seems "transclude" and "scope" cause some issues.
Please have a look : http://plnkr.co/edit/c7qoKlh75s8aS7fazYSo
I'm fairly new to AngularJS and I can't seem to find a way to do this appropriately. I created a custom directive to Apply a function a pass in the row Index. However, I can't seem to think of the way to show items in a row. What would be the best way to do this? I want to show specific and hide a target row via controller.
HTML:
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-class="{hidden: hidden[{{$index}}]}">
Item
</div>
</div>
My Directive:
scope.$apply(function () {
scope.$parent.showItem(index);
});
Controller:
$scope.teamDrop = function(index) {
$scope.hidden[index] = false;
};
You can use the ng-show and ng-hide directives to hide and show elements.
You can also use the ng-if directive to remove elements from the dom.
For your example I'd change your ng-class to an ng-hide
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-hide="hidden[$index]">
Item
</div>
</div>
You also don't need to use the {{}} syntax in the ng-class becausue it's already expecting an angular expression, that's for data binding.
I'm a noob about angular. I need a way to toggle only one element on a page.
Here is the plunker: http://plnkr.co/edit/W1eqgKiv5wv0hNkLDuzb?p=preview
If I click a button all the div are toggled/collapsed, but I need a way to collapse/toggle only the child element.
How about each model div controls its own destiny...
Plunker: http://plnkr.co/edit/rBCB9CflM7TsEEK5IAk1?p=preview
<div>
<button ng-model="collapsed1" ng-click="collapsed1 = !collapsed1">Toggle collapse</button>
<div ng-show="collapsed1">
<div class="well well-large">Some content</div>
</div>
</div>