Please, someone there some idea why angular ui-bootstrap popover is not changing the model in scope?
<button popover-placement="right"
uib-popover-template="'myPopoverTemplate.html'"
type="button"
class="btn btn-default">Click me!</button>
....
<script type="text/ng-template" id="myPopoverTemplate.html">
<div class="form-group">
<label>Date:</label>
<p class="input-group">
<input type="text"
class="form-control"
ng-model="dataClonada"
datepicker-options="dateOptionsClone"
uib-datepicker-popup="{{formats[5]}}"
is-open="popup3"
readonly="true"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="popup3=true"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<button class="btn btn-success" ng-click="show()">show value</button>
</div>
</script>
I did one simple plunker to show the situation.
https://plnkr.co/edit/ebYWI8hP0xtOboY2v37Z?p=preview
You need to change
ng-model="dataClonada"
to
ng-model="$parent.variable"
The directive (apparently) is creating a new child scope, so you need to use $parent to access the parent scope and access it's values (where variable resides).
Fixed plnkr
For some reason for me it worked with double parent:
ng-model="$parent.$parent.variable"
Can be, because the popover was inside of a repeater?
Related
I have a modal form with angular and uib-tabset.
I have only a footer in modal.
Each tabset has a form( A B and C).
When I try enabled/disable the save button on footer, I can´t acesss
acesss the forms. They are undefined.
So, in the 'Save' button(see plunker) - formA.$invalid doesn´t works. I think it is a scope problem.
I´d prefer doesn´t put a global form to all tabs.
Is there some workaround to solve it?
Markup:
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" ng-click="doCancel()" aria-hidden="true">×</button>
<h4 class="modal-title" id="ativarSmsLabel">
Test
</h4>
</div>
<div class="modal-body">
<uib-tabset active="activePill" vertical="false" type="pills">
<uib-tab index="0" heading="Agendamento">
<form name="formA" novalidate>
<input type="text" ng-model="testA"
</form>
</div>
</div>
</div>
</uib-tab>
<uib-tab index="1" heading="Ficha">
<form name="formB" novalidate>
<input type="text" ng-model="testB"
</form>
</uib-tab>
<uib-tab index="2" heading="Histórico">
<form name="formC" novalidate>
<input type="text" ng-model="testC"
</form>
</uib-tab>
</uib-tabset>
</div>
<div class="modal-footer">
<div class="btn-toolbar">
<button type="button" class="btn btn-sm btn-primary pull-right" ng-click="saveItem()"
aria-hidden="true" ng-disabled="formA.$invalid">
Save
</button>
<button type="button" class="btn btn-sm pull-right" ng-click="doCancel()"
aria-hidden="true">
Close
</button>
</div>
</div>
</div>
Core AngularJS directives such as ng-repeat, ng-switch, ng-view, ng-include and ng-if all create new child scopes. As a result, the form controller will attach its API to that child scope. In this case the uib-tabset directive is transcluding to a child scope.
To access form controls on the parent scope, use the ng-form directive to create a nested form:
<form name="top">
<div ng-if="AngularExpression">
<ng-form name="formA" novalidate>
<input ng-model="userData.testA" required />
</ng-form>
</div>
</form>
<div ng-show="top.formA.$error.$required">
ERROR: input required
</div>
Also it is important to follow the "best practice" of always have a dot, '.', in your ng-models.
For more information, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?.
can you help to get the ng-model data
<input type="text" class="form-control" ng-model = "DateSchedule" required>
<button type="submit" ng-click="saveReservation()" class="btn btn-primary pull-right"><i class="glyphicon glyphicon-plus"></i> Schedule</button>
in the script i already place the controller and app
alert($scope.DateSchedule);
it return me undefined
thanks
I have an Angular directive that includes a form with a datepicker. I am trying to create a function to keep the button click from calling submit on the form. I can not determine where to find the .opened attribute. When I was performing the open with ng-click everything worked. Below is sample code.
HTML:
<form ng-submit="editAlert.$valid && vm.handleSubmit()" name="editAlert" id="editAlert" class="buffer-bottom" novalidate>
<div class="form-group">
<label class="control-label" for="effectiveDate">Effective Date</label>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="MM-dd-yyyy" is-open="dpEffectiveDate.opened" ng-model="alertMsg.effectiveDateFmt" name="effectiveDate" id="effectiveDate">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="vm.openDateHandler($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
<p class="help-block" ng-show="editAlert.effectiveDate.$error.endBeforeStart">Effective date must be before expire date.</p>
</div>
</form>
I also tried passing dpEffectiveDate into the openDateHandler function.
Below is my Typescript function
openDateHandler = ($event) => {
$event.preventDefault();
//dpDate.opened = !dpDate.opened;
}
How do I access the .opened attribute?
If all you are trying to do is prevent the submit behaviour, simply add 'type="button"' to your button element.
<button type="button" class="btn btn-default" ng-click="vm.openDateHandler($event)">
By default, a button inside a form will act as a submit button unless it's given a different type.
You shouldnt need to mess with the opened state of a date picker to prevent a form submitting.
There seems to be a problem converting ui.bootstrap.buttons to be used with ng-repeat. The ui.bootstrap.buttons example and documentation is here: http://angular-ui.github.io/bootstrap/
Bascially the default example works nicely: http://plnkr.co/edit/2O81y57GtfP6EPNH9qYa?p=preview
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
But when it's converted the use ng-repeat, it breaks: http://plnkr.co/edit/nzx1VTGN4Q59JlFCU53V?p=preview
<div class="btn-group">
<label ng-repeat="test in ['Left', 'Middle', 'Right']" class="btn btn-primary" ng-model="radioModel" btn-radio="'{{test}}'">{{test}}</label>
</div>
Try
<label ng-repeat="test in ['Left', 'Middle', 'Right']" btn-radio="test" class="btn btn-primary" ng-model="radio.model">
instead of
btn-radio="'{{test}}'"
On top of this ng-repeat is creating a new scope so you need to account for this as well. Here is a working plunk: http://plnkr.co/edit/h5e5OgFCqv28MPy4tEaM?p=preview
In the end after some testing I got it working using ng-class for initial selected value and own ng-click handler that changes the selected button
HTML-code for the buttons:
<div class="btn-group">
<button ng-repeat="(timelineIndex, timeline) in timelines" ng-click="selectTimeline(timeline)" ng-class="{active: timeline.name === selectedTimeline.name}" class="btn btn-primary">
{{timeline.name}}
</button>
</div>
in controller:
$scope.selectTimeline = function(activeTimeline) {
$scope.selectedTimeline = activeTimeline;
};
I´m using the Bootstrap UI datepicker directive and I´m trying to have an datepicker button that opens the datepicker popup like in the original example but it does not work in a modal window.
See PLUNKER
What am I doing wrong?
Just change to: is-open="opened" to:
is-open="$parent.opened"
Fixed Demo Plunker
So relevant snippets of HTML will look like:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.MM.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="open()">
<i class="icon-calendar"></i></button> <b><- button not working</b>
</span>
</div>
I had to put a timeout to make it work:
function toggleStart($event) {
$event.preventDefault();
$event.stopPropagation();
$timeout(function () {
vm.isStartOpen = !vm.isStartOpen;
});
}
My template looks like this:
<input type="text" class="form-control"
datepicker-popup ng-model="vm.startDate"
is-open="vm.isStartOpen" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.toggleStart($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
datepicker directive creates its own scope which is not accessible outside.So to solve this you can use.
$parent.isopen
or use some Object property name to avoid prototype Inheritance, like
$scope.config.isopen=true;
ng-model="config.isopen" instead of ng-model="isopen".
You also work like that to initialize the date picker by icon.
HTML
<p class="input-group" ng-disabled="invoiceDateDisable">
<input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
JavaScript
$scope.open = function () {
$scope.opened = true;
};
You don't really need an open function:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.mm.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="$parent.opened=!$parent.opened">
<i class="icon-calendar"></i></button> <b><- button not working</b>
</span>
</div>