Angular UI Bootstrap Popover - How close all opened popover - angularjs

I've a table with a popover for every cell as in the follow example:
the call to popover:
<td ng-repeat="i in c.installments" ng-class="{ 'first' : i.first, 'last' : i.last, 'advance' : i.advance.value > 0, 'edited' : i.edited, 'final-installment' : i.last }" popover-trigger="{{ popoverFilter(i) }}" popover-placement="top" popover-title="{{i.id == 0 ? 'Advance' : 'Installment ' + i.id}}" popover-append-to-body="true" popover-template="popoverTemplate(i)" ng-init="payment= i; newpayment= i.amount.rounded_value" >
The popover template:
<script type="text/ng-template" id="editPopoverTemplate.html">
<form name="editPayment">
<h2>{{payment.amount.value|currency:undefined:cents}}</h2>
<div class="form-group" ng-class="{ 'has-error' : editPayment.newpayment.$invalid }">
<label>New value:</label>
<input type="number" name="newpayment" ng-model="newpayment" class="form-control no-spinner" step="1" min="10" required>
<span ng-messages="editPayment.newpayment.$error" class="help-block" role="alert">
<span ng-message="required">The value is mandatory</span>
<span ng-message="min">The value is too low</span>
<span ng-message="max">The value is too hight</span>
</span>
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn" type="button">Cancel</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary" type="button" ng-disabled="editPayment.$invalid">Save</button>
</div>
</div>
</form>
</script>
working example on plunker
I need to close all opened popover when new popover is open.
I need only a popover open.
It's possible? I need to extend the Angular UI Bootstrap library to do that?
Any help is appreciated.
The solution suggested in the linked answer below allow two popover open but i need to have only one popover opened, when a popover is open the other (opened) must be closed.

Starting in release 0.13.4, we've added the ability to programmatically open and close a tooltip and popover via the tooltip-is-open or popover-is-open boolean property. Via this, you can easily open and close your tooltips and popover on demand.

Related

Angular - Hide Div when form text input is not blank

Basically i would like for one dive to be hidden when someone adds text to a box.
I have a form where someone can either upload an image or add a link to an image. When the user adds an image link i would like to hide the upload button
Right now i have it that when they select an image to upload the text box will be hidden but i cant get the vice versa working.
Id like to hide the div "manual-upload" when a user adds text to the data-ng-model="dealsCTRL.urlimage"
<div class="manual-upload">
<div class="text-center form-group controls" ng-hide="uploaderProduct.queue.length">
<span class="btn btn-default btn-file">
Select Image <input type="file" nv-file-select uploader="uploaderProduct">
</span>
</div>
<div class="sub-label"> Upload an image of product.</div></br>
<div class="text-center form-group" ng-show="uploaderProduct.queue.length">
<button class="btn btn-primary" ng-click="uploadProductPicture();">Upload</button>
<button class="btn btn-default" ng-click="cancelProductUpload();">Delete</button>
</div>
<div ng-show="success" class="text-center text-success">
<strong>Upload Successful</strong>
</div>
<div ng-show="error" class="text-center text-danger">
<strong ng-bind="error"></strong>
</div>
</div>
<div class="add-image-link">
<label class="control-label" for="urlimage" ng-hide="uploaderProduct.queue.length">IMAGE URL</label>
<div class="controls" ng-hide="uploaderProduct.queue.length">
<input type="url" data-ng-model="dealsCTRL.urlimage" id="urlimage" class="form-control"
placeholder="Image URL" ng-change="blankPhoto()" required>
<div class="sub-label">Manually enter an image URL.</div>
</div>
</div>
You want to hide the element when you start typing so
div class="manual-upload" ng-hide="dealsCTRL.urlimage.length > 0"
Please try the following:
<div class="manual-upload" ng-show="dealsCTRL.urlimage.length === 0">

Angular UI: Dropdown not working with datepicker

I am trying to add Datepicker in dropdown as follows and have set autoClose="outsideClick". However, when any month button is pressed it toggles the dropdown. How to solve this?
Html Code:
<div class="date-wrap pull-right" dropdown auto-close="outsideClick">
<button class="btn btn-info" dropdown-toggle>Date Picker</button>
<div class="dropdown-menu datepicker" role="menu">
<datepicker show-weeks="false" ng-model="dt"></datepicker>
</div>
</div>
Plunker: http://plnkr.co/edit/lBn3Oo?p=preview
You need to manually prevent click event from bubbling, so it never reaches the topmost node (document) that closes dropdown:
<div class="date-wrap pull-right" dropdown auto-close="outsideClick">
<button class="btn btn-info" dropdown-toggle>Date Picker</button>
<div class="dropdown-menu datepicker" role="menu" ng-click="$event.stopPropagation()">
<datepicker show-weeks="false" ng-model="dt"></datepicker>
</div>
</div>
Note, ng-click="$event.stopPropagation()" that does the trick.
Demo: http://plnkr.co/edit/pPwW83Ro0u0g4dVhyZaZ?p=info

form with ngform with save button validation not working angular.js

I have a form which is dynamically generating the fields, I am using ng-form for this. The form has an ng-repeat for input fields and the main form has a 'Save' button.
i.e when one of the input fields is dirty and has content, the save button should be enabled and should be disabled otherwise.
Here is my HTML Code :
<form class="form-horizontal" name="$parent.fSForm" novalidate ">
<fieldset class="form-group pl-sm" ng-repeat="fs in list track by $index">
<ng-form name="innerForm">
<div class="col-md-5">
<input type="text" class="form-control" autocomplete="off" name="fsl" ng-change="fileChanged()" ng-model="fs.path" placeholder="Add new here">
</div>
</ng-form>
</fieldset>
<a class="prop-toggle ng-binding" href="" ng-click="addNew()">Add More</a>
</form>
</div>
<div class="footer">
<span>
<button type="button" class="btn" ng-click="close()">Cancel</button>
</span>
<span>
<button type="submit" class="btn btn-primary" ng-click="save()" ng-disabled="fSForm.$error.fooname">Save</button>
</span>
</div>
So for my save button to be disabled when the form loads initially how should I go about validating that with an ng-form present? The save should be enabled when one of the input fields has some text in it. not sure how we can handle ng-disabled with ng-form within a form save button

Click event on glypicon

How do I add a ng-click event to a bootstrap glyphicon in a textbox? The event doesn't get fired...
<body ng-app ng-init="mymodel='THIS IS MY MODEL'">
<h3>How to clear the model on remove icon click?</h3>
<div class="container">
<div class="form-group has-feedback" >
<input type="text" class="form-control" ng-model="mymodel"/>
<i class="glyphicon glyphicon-remove form-control-feedback"
ng-show="mymodel" ng-click="mymodel = null"></i>
</div>
<p>This is my model: {{mymodel}}</p>
<strong ng-click="mymodel = null">This works tho...</strong>
</div>
</body>
Plnkr link
This is happening because glyphicons provided with " pointer-events: none;" as default you can override it and remove this functionality by simple CSS:-)
.my .glyphicon {
pointer-events: all;
}
<div class="form-group has-feedback my" >
<input type="text" class="form-control" ng-model="mymodel"/>
<i class="glyphicon glyphicon-remove form-control-feedback"
ng-show="mymodel" ng-click="mymodel = null"></i>
</div>
Plunker

Angular JS ng-show/ hide based on drop-down list selected value

in the following code I have one drop-down list (serviceSmallId) for type of service.
It is populated using model info.
There is a second field check-box which should only be visible when drop-down has a selected value of 'Weekly'. I am trying to use ng-show/ hide of angular.
I tried to search for possible solutions but no luck.
Can anyone please guide me what I am doing wrong.
<section id="scrubber-view" class="mainbar" data-ng-controller="scrubber as vm">
<section class="matter">
<div class="container">
<div>
<button class="btn btn-info" ng-click="vm.goBack()"><i class="fa fa-arrow-left"></i>Back</button>
<button class="btn btn-info" ng-click="vm.cancel()" ng-disabled="!vm.canSave"><i class="fa fa-undo"></i>Cancel</button>
<button class="btn btn-info" ng-click="vm.save()" ng-disabled="!vm.canSave"><i class="fa fa-save"></i>Save</button>
<span ng-show="vm.hasChanges" style="color:orange" class="dissolve-animation ng-hide"><i class="fa fa-asterisk"></i></span>
</div>
<div class="row">
<div class="widget wblue">
<div data-cc-widget-header title="{{vm.title}}" subtitle="{{vm.scrubber.scrubberId}}"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="serviceSmallId" class="col-sm-2">Service</label>
<div class="col-sm-4">
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']">
</select>
</div>
</div>
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
<input class="form-control" type="checkbox" id="fullyFlanged" value="Bar" />
</div>
</form>
</div>
</div>
</div>
</section>
</section>
There probably is a more elegant "angular way" solution,
but I updated you code to work here - http://jsbin.com/tupisoriho/1/edit?html,js,output
Explanation of changes
Provided ng-show a value vm.checker
added ng-change to the select element and gave it a function checkerGo which tested to see if dropdown == 'weekly', if yes change vm.checker
Update
there is a more "angular way" - using expressions!
As per #Omri Aharon fiddle/comment below.
You don't need to get the value property because a ng-model don't hold the element but the value itself;
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
must be
<div class="form-group" ng-show="vm.scrubber.serviceSmallId == 'Weekly'">
EDIT: In your case vm.scrubber.serviceSmallId will contain the ID and not the description Weekly. I suggest you to use ng-change directive to call a function in your controller that will find the item based on ID and set in the controller to be visible for ng-show.
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']"
ng-change="vm.selectObj()">
vm.selectObj() will find and set the current selected object in the scope to an controller variable (ex.: vm.selectedItem) and:
<div class="form-group" ng-show="vm.selectedItem.description=='Weekly'">

Resources