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
Related
<select ng-model="dropdownlist" ng-options="x.item as x.item for x in list | unique:'item'">
</select>
<a data-toggle="popover" data-title="Add New Item" data-container="body" type="button" data-html="true" href="#" id="AddNewItem">Add New</a>
<!-- This doesn't work -->
<div id="popover-content" class="hide">
<input ng-model="addMe" placeholder="Item">
<button ng-click="addItem()" class="btn btn-primary">Add</button>
</div>
<!-- But this does (just removed the popover div) -->
<input ng-model="addMe" placeholder="Item">
<button ng-click="addItem()" class="btn btn-primary">Add</button>
JSFIDDLE
I'm trying to add an item to a dropdown list with an input from a popover using angular. It works when I take the popover out, but not with it.
I have retrieving the contents from database using $http.get api and displaying each record using ng-repeat. For each record i have a like and comment button. On clicking on comment button, i will show input box with send button previously it will be hidden(using ng-show). The problem is- on clicking any one of the record comment button,all other records input box with send button will be shown including clicked.
<div ng-repeat="dat in details">
<ul>
<li><b>Product:</b><span> {{dat.product_name}}</span></li>
</ul>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn buttonlike" ng-click="likebtn(dat.id,loginname)"><span class="glyphicon glyphicon-hand-right"></span><strong> Like</strong></button>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="mycomment()"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>
<div class="input-group" ng-show="comment1">
<input type="text" class="form-control" placeholder="comment" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-send"></span></span>
</div>
</div>
mycomment() method in script looks like-
$scope.comment1= false;
$scope.mycomment = function() {
$scope.comment1= true;
}
How can i change the name of ng-show-"comment1" dynamically(if I change, I have to change the name in script too) ?? is there any other way?
Try this:
<div ng-repeat="dat in details | filter : { product_name : textname} as results">
<hr/>
<p style="color:#4C97C8;" class="lead"><strong>{{dat.summary}}</strong></p>
<ul>
<li><b>Product:</b><span> {{dat.product_name}}</span></li>
<li><b>Product Manager:</b><span> {{dat.first_name}} {{dat.last_name}}</span></li>
<li><b>Description:</b><span> {{dat.description}}</span></li>
</ul>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn buttonlike" ng-click="likebtn(dat.id,loginname)"><span class="glyphicon glyphicon-hand-right"></span><strong> Like</strong></button>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="comment=true"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>
<div class="input-group" ng-show="comment">
<input type="text" class="form-control" placeholder="comment" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-send"></span></span>
</div>
</div>
Instead of ng-click="mycomment()" and ng-show="comment1": ng-click="comment=true" and ng-show="comment" accordingly. $scope.comment1 and $scope.mycomment are not needed.
I am doing an event scheduler app using angular js. In calendar when i am clicking the event i am sent the event id to back end to getting event details.Here how to get the pop up on my calendar when the url status is true.
My code is:
$scope.alertOnEventClick = function( date, jsEvent, view){
var event_id=date.id;
$http.post("Youin-api/v2/business/event_information",{"event_id":event_id}).then(function(response) {
if(response.error="true")
{
$scope.eventInformation= response;
}
});
};
My bootstrap model pop up is:
<div class="modal fade" id="AddUsers" ng-model="eventInformation" role="dialog">
<div class="modal-dialog " style="top:80px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">User Details</h4>
</div>
<div class="modal-body">
<p><form role="form" ng-submit="AddUsers(addusers)">
<div class="form-group">
<label for="pwd">User Type</label>
<input type="text" class="form-control" id="user_type" ng-model="addusers.user_type" value="{{addusers.user_type}}">
</div>
<div class="form-group">
<label for="pwd">Created By</label>
<input ty{{addusers.user_type}}pe="text" class="form-control" id="created_by" ng-model="addusers.created_by" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form></p>
</div>
</div>
</div>
</div>
thanks in advance..!!
To manually trigger modal to show from javascript. Use this.
$('#AddUsers').modal('show')
Note: You have to add bootstrap.js and jquery.js to use this functionality.
You can view the complete modal api options here.
Wherever you want to open the modal based on your condition you can achieve the same using following:
angular.element(document.getElementById("AddUsers")).modal();
I open a popup using ngDialog.Now i want to expand textboxes more .but the popup is expanding according to textboxes.But i need only a div part to be scrolled on the popup in which in div we are expanding textboxes.Is it possible.if possible can anyone help me to solve.
//js file
$scope.radiolabels=[];
$scope.addradio=function(){
ngDialog.open({
template:"popupfiles/radioname.html",
closeByDocument:false,
closeByEscape:false,
scope: $scope,
showClose:false
});
};
$scope.expndradiolabels=function(){
$scope.order++;
var objt={
Name:"",
type:"radiobtns",
rbtn:[{
Name:"",
order:$scope.order
}]
};
$scope.radiolabels.push(objt);
};
$scope.cancelradioname=function(){
ngDialog.closeAll();
};
//html file
<h3 style="color: #0d7dc1;margin-top: 0px;">Enter the Heading name for RadioButtons</h3>
<h3>Headings For RadioButons:</h3>
<div style="overflow:auto;">
<ul>
<li ng-repeat="radiolbs in radiolabels track by $index">
Label: <input type="text" id="ral_{{$index}}" data-ng-model="$parent.radiolabels[$index].Name"/><br>
RadioButtons {{$index}}: <input type="text" id="rab_{{$index}}"><br>
RadioButtons {{$index}}:<input type="text" id="rab_{{$index}}"><button class="btn btn-default">+</button>
<li>
<button class="btn btn-default" ng-click="expndradiolabels()">Click to add multiple radio headings</button>
</li>
</ul>
</div>
<button type="submit" class="btn btn-default pull-right" ng-click="saveradioname()">Save</button>
<button class="btn btn-default" ng-click="cancelradioname()">Cancel</button>
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.