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>
Related
Mobile Angular UI Is getting popular which is nothing but bootstrap 3 and angularjs combination
I would like to create a modal dialog box on button click and close the dialog on close icon, how to do it?
Based on the docs it says
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state='modal1'>
.....
</div>
</div>
But how to call this dialog, I tried this
<button ui-turn-on="modal1" class="btn btn-primary">Show Model</button>
But it is not working as expected, I am getting Warning: Attempt to set uninitialized shared state: modal1error
I think you have placed ui-content-for inside the ui-yield-to
Put it outside that div tag as follows
<div ui-yield-to="modals"></div>
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state="modal1">
....your model html code
</div>
</div>
So that modals will remain as a place holder
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?
on click on "toggle" i want to toggle the div
a) how to keep the div content by default open / show?
b) onclick how to toggle the class to achieve icon change from down to up?
Please refer the below fiddle:
http://jsfiddle.net/EhTZW/572/
HTML:
<h3>Toggle with AngularJS</h3>
<div ng-app id="ng-app">
<hr />
Toggle
<div ng-show="collapsed">I am description for the above title, which was collapsed by default</div>
<hr />
</div>
To change icon you can use ngClass
To make content visible by default , convert you ng-show to ng-hide
Try like this
Toggle
<div ng-hide="collapsed">I am description for the above title, which was collapsed by default</div>
DEMO
<h3>Toggle with AngularJS</h3>
<div ng-app id="ng-app">
<hr />
<!--use ng-class for conditions-->
Toggle
<!--ng-show to !collapsed for default open-->
<div ng-show="!collapsed">I am description for the above title, which was collapsed by default</div>
<hr />
</div>
you can use something like this
I am description for the above title, which was collapsed by default
You just need to set the value of collapsed=true at the beginning
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>
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