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?
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>
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'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>
I have a table in Angular that gets list of names. I want to be able to delete a name when the user click on the button in front of the name. However, before that, I want to show a modal and ask the user to confirm that.
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in vm.entity | filter:vm.filter track by c.Id">
<td>
<span>{{c.Name}}</span>
</td>
<td>
<button class="glyphicon glyphicon-trash" type="button" data-toggle="modal" data-target=".bs-example-modal-sm"></button>
</td>
</tr>
</tbody>
</table>
I am using Bootstap modal and here is what I have.
<div class="modal fade bs-example-modal-sm">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Are you sure?</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this Item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" data-ng-click="vm.remove(c)" data-dismiss="modal" class="btn btn-primary">Yes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The problem is since the buttons in the modal are not in the loop I can't pass in the correct object into the vm.remove method to delete the item.
Does anyone know how to deal with this issue?
Ok Guys,
Thanks for all your help.
I have managed to fix it by moving the modal right next to the button so the modal is repeated as well as the button as #Dabbiemiller suggested and then I assign a ID for each modal that matches the id of each element, and I assign the data-target= "modal{{c.id}}" and it works :)
Also I have changed to becase the fade class was causing an issue as well.
<button class="glyphicon glyphicon-trash" ng-show="vm.isAdmin == 'True'" type="button" data-toggle="modal" data-target="#modal{{c.id}}"></button>
<div class="modal" id="modal{{c.id}}">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Are you sure?</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this Item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" data-ng-click="vm.remove(c)" data-dismiss="modal" class="btn btn-primary">Yes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->