I'm using uib-datepicker-popup and I would like to change the button bar. Right now it uses .btn-info, .btn-danger and .btn-success for the 'today', 'clear' and 'close' buttons respectively. How could I change these to be other button classes, such as .btn-default (with hopefully not much work)?
You can modify the datepicker template. Default one is here: https://github.com/angular-ui/bootstrap/blob/master/template/datepickerPopup/popup.html
Use the templateUrl directive like this:
<input type="text" uib-datepicker-popup="MM/dd/yyyy" template-url="path/to/template.html" />
First, you need to add the datepicker-popup-template-url property
<input type="text" uib-datepicker-popup="MM/dd/yyyy" **datepicker-popup-template-url**="path/to/template.html" />
Then, you need to create a template.html
I added a custom button which is setting date 31/12/9999. Template is below
<ul class="uib-datepicker-popup dropdown-menu uib-position-measure" dropdown-nested ng-if="isOpen" style="left: 0px; top: 43px; display: block;" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<li ng-transclude></li>
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select('31/12/9999', $event)">31/12/9999</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
</ul>
Related
I have overridden datepicker popup to add a custom button.
My custom button is wrapped inside <script id="template/datepicker/popup.html" type="text/ng-template">
directive.
I can see the custom button like the picture below but I want to listen the click of "Regular Price" button in my controller and re-render all the dates of calendar with some new custom css. I was unable to get any event in my controller using ng-click for the custom button.
How can I achieve it in my controller ?
Edit
Html
<!-- Overriding code for popup calendar-->
<script id="template/datepicker/popup.html" type="text/ng-template">
<ul class="uib-datepicker-popup dropdown-menu" dropdown-nested ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<!-- regular price button -->
<button type="button" class="btn btn-sm btn-warning" ng-click="regularPrice()">Regular Price</button>
<!-- /regular price button-->
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close()">{{ getText('close') }}</button>
</li>
</ul>
</script>
<!-- /Overriding code for popup calendar -->
<div class="text-center">Check-in</div>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="check_in_date" is-open="checkInOpened" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-change="selectedCheckinDate(check_in_date)" min-date="{{minDate}}" date-disabled="disabled(date, mode)" custom-class="getDayClass(date, mode)" show-weeks="false" disabled="disabled" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openCheckIn($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
In controller
$scope.regularPrice = function(){
alert('regular selected');
};
Since uibDatepickerPopup directive creates an isolated scope and ng-include creates a child scope, regularPrice handler defined in your controller could be accessed like this: $parent.$parent.regularPrice()
Here is a modified popup template:
<div>
<ul class="uib-datepicker-popup dropdown-menu" dropdown-nested ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<!-- regular price button -->
<button type="button" class="btn btn-sm btn-warning" ng-click="$parent.$parent.regularPrice()">Regular Price</button>
<!-- /regular price button-->
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
</ul>
</div>
Demo
Here is my code:-
<div class="input-group">
<input class="form-control" ng-model="name" required />
<span class="input-group-btn">
<button class="btn btn-primary" type="button" >
<i class="fa fa-plus"></i>
</button>
</span>
</div>
Here I am using bootstrap class input-group which contains two elements i.e <input> and <span>
So here I want to show that button on mouse hover.
So I tried by using ng-mouseover
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-mouseover="open" >
<i class="fa fa-plus"></i>
</button>
</span>
Where open is :-
$scope.open = true;
I think ng-mouseover is better option but if is there any other simple way.... please tell me
var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
$scope.open = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<div ng-mouseover="open = true" ng-mouseleave="open = false">
To display button mouseover here!!!
<button class="btn btn-primary" type="button" ng-show="open">
<i class="fa fa-plus">Button</i>
</button>
</div>
</div>
try this. also you can use :hover for show/hide element.
<button class="btn btn-primary" type="button" ng-show="open" ng-mouseover="open = true" >
<i class="fa fa-plus"></i>
</button>
I am new to angularjs and I donl quite know how to make it work with nested routes.
In my Laravel routes file i have set up a route like movie{id}/review{id} and I need to make it work restfully with angular.
The problem is that I do a loop for all the movies then for all the reviews, in PHP that would be simple but with Angular I can't access the id of the movie in the reviews loop.
I have set up different controllers for movies and reviews both for Laravel and Angular.
Here is the html part for angular, note that I use modal for the create and edit forms.
<div class="row" ng-app="movies" ng-controller="moviesController">
<h2>All movies</h2>
<div ng-repeat="movie in movies" ng-init="movId = movie.id">
<blockquote>
<strong class="text-center "><% movie.title %></strong>
<p><% movie.description %></p>
{{--<footer><% movie.review %></footer>--}}
</blockquote>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary btn-sm" ng-click="editMovie(movie.id)">
Edit Movie
</button>
<button type="button" class="btn btn-primary btn-sm" ng-click="deleteMovie(movie.id)">
Delete Movie
</button>
<div ng-controller="moviesReviewController">
<div ng-repeat="movieReview in movieReviews">
<blockquote>
<strong class="text-center "><% movieReview.title %></strong>
<p><% movieReview.body %></p>
<footer><% movieReview.stars %></footer>
</blockquote>
<button type="button" class="btn btn-primary btn-sm" ng-click="editMovieReview(movId, movieReview.id)">
Edit Movie
</button>
<button type="button" class="btn btn-primary btn-sm" ng-click="deleteMovieReview(movId, movieReview.id)">
Delete Movie
</button>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" ng-click="movieId = movId" data-target="#movieReviewModal">
Post a review
</button>
</div>
</div>
<p class="text-center" ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#moviesModal">
Add New Movie
</button>
in my Form i have Buttons who only be shown then edit is true. Now i set edit from another Button and get a problem.
The View get editable, thats great. But the Buttons don´t showing. Whats wrong?
This is a bit of the code from my view.
<div ng-controller="MenuController" ng-init="edit=false" style="background:whitesmoke; border:1px solid lightgray; border-radius:5px; margin-top:0px; margin-bottom:5px; height:405px;">
<button prevent-default ng-click="" class="btn btn-deufol btn-sm pull-right" style="width:150px;margin:2px;"><span class="glyphicon glyphicon-print"></span> Lieferschein drucken</button>
<button prevent-default ng-click="" class="btn btn-deufol btn-sm pull-right" style="width:150px;margin:2px;"><span class="glyphicon glyphicon-print"></span> Auftrag drucken</button>
<button prevent-default ng-click="edit=true" ng-show="!edit" name="BtnWork" id="BtnWork" class="btn btn-deufol btn-sm pull-right" style="width:150px;margin:2px;"><span class="glyphicon glyphicon-pencil"></span> Bearbeiten</button>
<button prevent-default ng-click="resetData()" ng-show="edit" ng-model="BtnReset" id="BtnReset" e-form="textBtnForm" class="btn btn-danger btn-sm pull-right" style="width:150px;margin:2px;"><span class="glyphicon glyphicon-remove-circle"></span> Abbruch</button>
<button prevent-default ng-click="saveData()" ng-show="edit" id="BtnUpdate" class="btn btn-success btn-sm pull-right" style="width:150px;margin:2px;"><span class="glyphicon glyphicon-ok-circle"></span> Speichern</button>
<ul class="nav nav-tabs">
<li class="active">
<a data-target="#tab-one" data-toggle="tab"><i class="glyphicon glyphicon-list-alt"></i> Auftrag</a>
</li>
<li>
<a data-target="#tab-two" data-toggle="tab"><i class="glyphicon glyphicon-book"></i> Dokumente</a>
</li>
</ul>
<div class="tab-content css-form">
<div id="tab-one" class="tab-pane active">
<form name="InputForm" novalidate role="form" class="simple-form">
<div ng-view class="table-responsive table-singleview" style="position:relative;background:whitesmoke;margin-top:0px;margin-bottom:0px;">
<table border="0" style="width:100%; height:100%;">
<tbody ng-controller="ContractsSingleViewController">
<tr>
<td style="width:8%;" align="left">Standort</td>
<td style="width:25.3333%">
<div ng-controller="LocationsListController">
<span class="nullable">
<%--required--%>
<select placeholder="Standort" data-ng-model="myLocations" ng-disabled="!edit" ng-options="Plants._locationName for Plants in myLocationsList" style="width:281px;height:23px;background:whitesmoke;" class="ng-valid ng-dirty">
<option value="">{{myViewData.locationName}}</option>
</select>
</span>
<%--<span class="label label-danger" data-ng-show="myViewData.locationName.$error.required">Required!</span>--%>
</div>
</td>
.............
</table>
</tbody>
</div>
</form>
</div>
<%--Table one--%>
In my angular code i set edit = true like this (snippet):
$scope.edit = false;
Why this works for my table, but no for my buttons?
I have a simple directive using button groups from Bootstrap. I'm using transclude so I can add in more buttons for certainly layouts. This all works like a champ, but I need to remove the transclude div so that it doesn't mess up the button group layout.
So the directive renders out this:
<div class="btn-group ng-isolate-scope">
<button class="btn btn-default">Save</button>
<button class="btn btn-default">Cancel</button>
<div ng-transclude="">
<button class="btn btn-danger"Delete</button>
</div>
</div>
What I want is this:
<div class="btn-group ng-isolate-scope">
<button class="btn btn-default">Save</button>
<button class="btn btn-default">Cancel</button>
<button class="btn btn-danger">Delete</button>
</div>
I found this article but It's a bit outdated and references deprecated functions in compile. Can someone point me in the right direction?