I'm working with angular and have the next issue: I have a group of accordions which have a dropdown menu on the header. I want to expand the last added element to the group of accordions, so I added an additional paramater _isOpen and when I add a new element: _isOpen = true. Everything works, but dropdown on the accordions' header opens as well as accordion.
Here's how it looks in angular:
<uib-accordion close-others="oneAtATime">
<uib-accordion-group template-url="./custom-template.html" is-open="element._isOpen" ng-repeat="element in rlFull.elements track by element.Id" scroll-glue>
<div class="testing-table" ui-ace="{ onLoad : aceLoaded, mode: 'gherkin', theme: 'chrome'}" ng-model='element.Text' join-steps-array style="height : 200px"></div>
</uib-accordion-group>
</uib-accordion>
And part from template with dropdown meny:
<div class="action-block">
<div uib-dropdown="dropdown" class="dropdown-holder">
<button uib-dropdown-toggle="" class="btn">
Actions
<span class="ico-dropdown"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li>
Save
</li>
<li>
Delete
</li>
</ul>
</div>
</div>
I added is-open = false for uib-dropdown and it helped me:
<div class="action-block">
<div uib-dropdown="dropdown" class="dropdown-holder" is-open="false">
<button uib-dropdown-toggle="" class="btn">
Actions
<span class="ico-dropdown"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li>
Save
</li>
<li>
Delete
</li>
</ul>
</div>
</div>
Related
The following is the partial view that I'm using. Somehow the 'ng-scope' class is not added automatically to every HTML tag. Could someone tell me what might be the cause of this? I know angular.js adds class conditionally but I don't know how to fix this.
<div class="my-photo-header">
<div class="container">
<a class="navbar-brand my-navbar-brand">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<form class="navbar-form my-navbar-form navbar-left" role="search">
<div>
<input id="photo-title" type="text" class="form-control" placeholder="Untitled"
title="Edit your photo title here." value="TITLE">
</div>
</form>
<ul id="photo-title-header" class="nav nav-tabs">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
File <span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a>Save</a>
</li>
<li>
<a ng-click="vm.haha()">Upload</a>
<input type="file" upload-image="uploadImage"/>
</li>
<li><a>Open</a></li>
<li><a>Invite</a></li>
<li role="separator" class="divider"></li>
<li><a>Export as<span class="caret"></span></a></li>
<li><a>Print</a></li>
</ul>
</li>
<!-- Please change TODO to display the number, and maybe change style to not be a tab -->
<li role="listitem"><a>{{TODO}} revisions</a></li>
<li>Logout</li>
</ul>
</div>
</div>
I have this drop-down menu that I populate using ng-repeat:
<div class="btn-group btn-xs" dropdown keyboard-nav>
<input id="simple-btn-keyboard-nav" ng-model="available_fields_query" id="single-button" dropdown-toggle ng-disabled="disabled" placeholder="Add New Field">
</input>
<ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li ng-repeat="item in availableFields">
<a ng-click="addField(item)" role="menuitem">{{item}}</a>
</li>
</ul>
</div>
And I supposed to be able to navigate through it with kb arrows, but for some reason I can't focus it with tab or arrows.
But If I manually do something like this:
<div class="btn-group" dropdown dropdown-append-to-body>
<button id="btn-append-to-body" type="button" class="btn btn-primary" dropdown-toggle>
Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
It works fine, and I can target fields in a dropdown with my keyboard.
Why this is happening and how can I fix it?
$scope.addField = function (value) {
$scope.state_from_editor.fields.push(value);
};
Well it wasn't working because <a> attribute was missing href parameter, as soon as I added href="#" it started to work.
I have a SPA that implements modals. I'm trying to create dropdowns for certain elements that have modals attached to them. I want each dropdown to display a list of commands, and then a "link" to the modal. I can implement the modals just fine. The problem is with the dropdowns. The page works fine when I implement the first dropdown, but when I try to implement the second dropdown, neither of them work. I set the data-target attribute to see if that changed anything, but I am either not using it correctly or it's not part of the solution. Any ideas?
<div class="row cluster" ng-repeat="cluster in clusterCtrl.clusters">
<!-- this dropdown breaks the other one -->
<div class="btn-group" dropdown is-open="status.isopen" data-target="#cluster">
<h4 id="cluster" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
{{cluster.name}}
</h4>
<ul class="dropdown-menu" role="menu">
<li role="menuitem">Status</li>
<li role="menuitem">Start<li>
<li role="menuitem">Stop</li>
<li class="divider"></li>
<li role="menuitem"><a class="pointer" ng-click="openCluster()">Details</a></li>
</ul>
</div>
<!-- -->
<div class="col-lg-4">
<!-- START INSTANCE DISPLAY -->
<div class="row">
<div class="col-xs-1 instance" ng-repeat="instance in instanceCtrl.instances">
<div class="btn-group" dropdown is-open="status.isopen" data-target="#instance">
<h6 id="instance" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
{{instance.name}}
</h6>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Status</li>
<li role="menuitem">Start<li>
<li role="menuitem">Stop</li>
<li class="divider"></li>
<li role="menuitem"><a class="pointer" ng-click="openInstance()">Details</a></li>
</ul>
</div>
</div>
</div>
<!-- END INSTANCE DISPLAY -->
</div>
</div>
The data-target attribute is not needed. The problem lies in dropdown is-open="status.isopen". This is a unique attribute. To fix it, you need to write a new controller for your dropdown. Be sure not to name it DropdownController since that it an internal control to Bootstrap.
dropdown-controller.js
(function() {
angular
.module('MyApp')
.controller('DropdownCtrl', function($scope) {
$scope.status = {
isClusterOpen: false,
isInstanceOpen: false,
};
$scope.toggled = function(open) {
console.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isClusterOpen = !$scope.status.isClusterOpen;
$scope.status.isInstanceOpen = !$scope.status.isInstanceOpen;
};
});
})();
index.html
<div class="row cluster" ng-repeat="cluster in clusterCtrl.clusters">
<!-- Changed -->
<div class="btn-group" dropdown is-cluster-open="status.isClusterOpen" >
<!-- -->
<h4 id="cluster" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
{{cluster.name}}
</h4>
<ul class="dropdown-menu" role="menu">
<li role="menuitem">Status</li>
<li role="menuitem">Start<li>
<li role="menuitem">Stop</li>
<li class="divider"></li>
<li role="menuitem"><a class="pointer" ng-click="openCluster()">Details</a></li>
</ul>
</div>
<div class="col-lg-4">
<!-- START INSTANCE DISPLAY -->
<div class="row">
<div class="col-xs-1 instance" ng-repeat="instance in instanceCtrl.instances">
<!-- Changed -->
<div class="btn-group" dropdown is-instance-open="status.isInstanceOpen">
<!-- -->
<h6 id="instance" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
{{instance.name}}
</h6>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Status</li>
<li role="menuitem">Start<li>
<li role="menuitem">Stop</li>
<li class="divider"></li>
<li role="menuitem"><a class="pointer" ng-click="openInstance()">Details</a></li>
</ul>
</div>
</div>
</div>
<!-- END INSTANCE DISPLAY -->
</div>
</div>
I am developing with angular an admin, and resources I'm using Angular Material sidenav.
I could make the menu work 50%, can not do the toggle function normally.
Test case, click several times on the toggle menu it opens :D
<header class="nav-header">
<a ng-href="#/" class="docs-logo">
<h1 class="docs-logotype md-heading">Angular Material</h1>
</a>
</header>
<ul class="skip-links">
<li class="md-whiteframe-z2">
<md-button ng-click="focusMainContent($event)" href="#">Skip to content</md-button>
</li>
</ul>
<md-content flex role="navigation">
<ul class="docs-menu">
<li ng-repeat="sectionmenu in menu.sections" class="parent-list-item {{sectionmenu.className || ''}}" ng-class="{'parentActive' : isSectionSelected(sectionmenu)}">
<h2 class="menu-heading md-subhead" ng-if="sectionmenu.type === 'heading'" id="heading_{{ sectionmenu.title | nospace }}">
{{sectionmenu.title}}
</h2>
<menu-link sectionmenu="sectionmenu" ng-if="sectionmenu.type === 'link'"></menu-link>
<menu-toggle sectionmenu="sectionmenu" ng-if="sectionmenu.type === 'toggle'"></menu-toggle>
</li>
</ul>
</md-content>
</md-sidenav>
Follows a problem Plunker:
http://embed.plnkr.co/fq3tonZoddSSZkyAaWD8/preview
Editable Plunker:
http://plnkr.co/edit/FQcZrwYlh4LPKuje9mLI?p=preview
UPDATED and RESOLVED:
In template menu-toggle.tpl.html, change this:
<ul ng-show="isOpen()" id="menu-{{sectionmenu.title | nospace}}" class="menu-toggle-list">
<li ng-repeat="page in sectionmenu.pages">
<menu-link sectionmenu="page"></menu-link>
</li>
</ul>
for this:
<ul id="menu-{{sectionmenu.title | nospace}}" class="menu-toggle-list">
<li ng-repeat="page in sectionmenu.pages">
<menu-link sectionmenu="page"></menu-link>
</li>
</ul>
I am using ng-show and ng-click to show / hide 2 divs based on the user click of one of the app menu as shown below. The problem I am facing is that on clicking on the link to display the dashboard div nothing is shown, instead the other div (div2) is always shown. Can someone please check my code and let me know what exactly I am doing wrong here? Thanks
index
<div id="header" ng-controller="MenuController">
<ul >
<li>
Main
</li>
<li>
<a href ng-hide="userLogged == 1">Login</a>
<a href ng-click="switchDashboard()" ng-show="userLogged > 1">Dashboard</a>
</li>
</ul>
</div>
<div>
<div ng-controller="MenuController">
<div id="dashboard" ng-show="showUserPanel">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</div>
<div id="div2" ng-hide="showUserPanel">
<ul>
<li>Reg item 1</li>
<li>Reg item 2</li>
</ul>
</div>
<div ng-view></div>
</div>
</div>
MenuController:
$scope.showUserPanel = false;
$scope.switchDashboard = function(){
$scope.showUserPanel = !$scope.showUserPanel;
};
I have also tried changing the index to have only one instance for MenuController, but I still have as shown below the same problem
<div id="header" ng-controller="MenuController">
<ul >
<li>
Main
</li>
<li>
<a href ng-hide="userLogged == 1">Login</a>
<a href ng-click="switchDashboard()" ng-show="userLogged > 1">Dashboard</a>
</li>
</ul>
<div id="dashboard" ng-show="showUserPanel">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</div>
<div id="div2" ng-hide="showUserPanel">
<ul>
<li>Reg item 1</li>
<li>Reg item 2</li>
</ul>
</div>
</div>
<div>
<div ng-controller="MenuController">
<div ng-view></div>
</div>
</div>
You have 2 different instances of your controller and they will function independently of each other, see this fiddle: http://jsfiddle.net/k4YH6/
HTML:
<div ng-app>
<div ng-controller="MyCtrl">
<button type="button" ng-click="increment()">Ctrl instance 1: {{value}}</button>
</div>
<div ng-controller="MyCtrl">
<button type="button" ng-click="increment()">Ctrl instance 2: {{value}}</button>
</div>
</div>
JS:
function MyCtrl($scope) {
$scope.value = 1;
$scope.increment = function () {
$scope.value++;
};
}
More related fiddle: http://jsfiddle.net/jph4n/
You don't need the switchDashoard() function.
ng-click="showUserPanel = !showUserPanel"
ng-show="showUserPanel"
showUserPanel = !showUserPanel Will toggle the values for ng-show/ng-hide.