when i click on Deploy button it's upload both environment list, and category list Instead it opening both lists it should open just the environment list, then open the category list once an environment has been selected.
<div class="download-options">
<form class="form-inline" role="form">
<div class="dropdown" id="download-target-environment-dropdown" ng-show="!comparisonDeployment">
<label class="control-label">Target Environment:</label>
<input type="text" class="form-control dropdown-toggle" data-toggle="dropdown" role="button" data-target="#"
value="{{targetEnvironment.alias}}" readonly>
<ul class="dropdown-menu" role="menu" ng-class="{show: !targetEnvironment}">
<li ng-repeat="env in environments">
<a ng-click="setTargetEnvironment(env)">{{env.alias}}</a>
</li>
</ul>
</div>
<div class="dropdown" id="download-data-type-dropdown">
<label class="control-label">Categorie`enter code here`s:</label>
<input id="add_a_category" type="text" class="form-control dropdown-toggle" data-toggle="dropdown" role="button"
data-target="#"
value="Add a category" readonly/>
<ul class="dropdown-menu" role="menu" ng-class="{show: !type}">
<li ng-repeat="type in typesInfo" ng-class="{disabled: !hasRootFromType(type)}">
<a ng-click="setType(type)">{{type.alias}}</a>
</li>
</ul>
</div>
</form>
</div>
Related
I wish to set the value of my dropdown and the value of my textbox in ng-model to pass it to my angular js.
The console displays null for the value of my dropdown.
What I've tried:
<form id="uploadForm">
<div id="republishSingle" class="panel-collapse collapse in desc vertical" style="text-align: left">
<div class="horizontal">
<div class="dropdown">
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" id="selectSource1" aria-haspopup="true" aria-expanded="true" ng-model="republishSource">
Source system
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<h5 class="dropdown-header">Source system</h5>
<a class="dropdown-item" href="#" data-value="s1">S1</a>
<a class="dropdown-item" href="#" data-value="s2">S2</a>
</div>
</div>
<div class="col-5">
<input class="form-control disableButton" id="policy" type="text" placeholder="Policy" ng-model="republishInput"/>
</div>
<div class="form-group mb-3">
<div class="form-group" aria-label="file upload">
<input id="republish" type="submit" class="btn btn-success"
ng-click="doRepublish(republishSource,republishInput)" value="Republish"/>
</div>
</div>
</div>
</div>
</form>
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 am using angular-bootstrap-datetimepicker.
On clicking on date picker for selection of date & time.
The current state is removing from browser URL. How to resolve this?
HTML code
<div class="dropdown">
<a class="dropdown-toggle" id="startDate" role="button" data-toggle="dropdown" data-target="#" href="#">
<div class="input-group">
<input placeholder="{{'START_DATE' | translate}} *" required type="text" class="form-control" data-ng-model="startDate"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-on-set-time="onStartDateSet(newDate, oldDate)" date-disabled="disableViewFields" data-ng-model="startDate" data-datetimepicker-config="{ dropdownSelector: '#startDate', startView:'day', minView:'hour' }" />
</ul>
</div>
If I removed href='#' from a tag, working fine. Code follows
<div class="dropdown">
<a class="dropdown-toggle" id="startDate" role="button" data-toggle="dropdown" data-target="#">
<div class="input-group">
<input placeholder="{{'START_DATE' | translate}} *" required type="text" class="form-control" data-ng-model="startDate"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-on-set-time="onStartDateSet(newDate, oldDate)" date-disabled="disableViewFields" data-ng-model="startDate" data-datetimepicker-config="{ dropdownSelector: '#startDate', startView:'day', minView:'hour' }" />
</ul>
I'm creating a social network site using AngularJS with bootstrap, the site is almost done but dropdown does NOT work.
I have tried many solutions online but none of them seem to work.
"ui.router" and "ui.bootstrap" are in my app.js so that is not the problem
HTML:
<div role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{{ settings.sitename }}
</div>
<div class="navbar-collapse collapse">
<form role="search" class="navbar-form navbar-right" ng-if="isSignupPage">
<div class="form-group">
{{ 'already_registered' | translate }}
</div>
<a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a>
</form>
<form role="search" class="navbar-form navbar-right" ng-if="isLoginPage">
<div class="form-group">
{{ 'no_account_signup' | translate }}
</div>
<a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
I'm using angular 1.4.0
You forgot about dropdown directive. Angular bootstrap documentation says: Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<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>
So related to your code.
<div role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{{ settings.sitename }}
</div>
<div class="navbar-collapse collapse">
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
Button dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">
<a href="#">
<form role="search" class="navbar-form navbar-right" ng-if="isSignupPage">
<div class="form-group">
{{ 'already_registered' | translate }}
</div>
<a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a>
</form>
</a>
</li>
<li role="menuitem">
<a href="#">
<form role="search" class="navbar-form navbar-right" ng-if="isLoginPage">
<div class="form-group">
{{ 'no_account_signup' | translate }}
</div>
<a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a>
</form>
</a>
</li>
</ul>
</div>
</div>
<!--/.nav-collapse -->
</div>
</div>
I am getting my head around twitter bootstrap 3 and specifically the column setup. I got a 2 columns on the same line:
<!--datetime row-->
<div>
<div class="col-md-6 form-group">
<label for="">Title:</label>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="col-md-6 form-group">
why is this left instead of right aligned??
</div>
</div>
The problem is I cannot get the second column to sit to the right where the dropdown is. So I would like the dropdown in the first column and in the second column the 'why is this...' text. What causes this? Here is a ref to the full snippet: http://plnkr.co/edit/tufLd2?p=preview
You can add ' text-right to your <div class="col-md-6 form-group">
please see here
http://plnkr.co/edit/rUAdxLJ6ExKZYFbkveuC?p=preview
and if you want to have column for 50% of screen even on small devices
change col-md-6 to col-xs-6
http://plnkr.co/edit/RxPx0zzT5YmodepQ3zIj?p=preview
This might solve the problem
<div>
<div class="col-xs-6 form-group">
<label for="">Title:</label>
</div>
<div class="col-xs-6 form-group text-right">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="col-md-6 form-group">
why is this left instead of right aligned??
</div>
</div>
Live Demo
<!--datetime row-->
<div **class="row"**>
<div class="col-md-6 form-group">
<label for="">Title:</label>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="col-md-6 form-group">
why is this left instead of right aligned??
</div>
</div>
Copy this code in your example and scratch the preview window to the left.
<form class="form-horizontal">
<div class="form-group">
<label for="" class="col-sm-2 control-label">Title:</label>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class=" form-group">
why is this left instead of right aligned??
</div>
Live example