I'm trying to add angular-bootstrap tooltip in each button of button-group. When I do this, hovering right button destroys all buttons styles.
html:
<div class="btn-group" style="margin-top:100px;">
<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
js:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope) {
$scope.dynamicTooltip = 'Hello, World!';
});
Here is my plunker: http://plnkr.co/edit/NFjJJXEKyJHDgddcPdNa?p=preview
It's because your tooltip is generating inside the btn-group. This means the 'Right' button is no longer the last element in the group, as such the styling changes until the tooltip disappears. Try appending the tooltip to the body, rather than the parent.
<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" tooltip-append-to-body="true" ng-model="radioModel" btn-radio="'Right'">Right</label>
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.
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?
I'm working on something where you have a reset button, a button to save changes to a database object, and I added a delete button next to it. No matter what I do, I can't seem to find how to get the two different buttons to call different functions. I'm very new at this...
Here's the HTML part.
<fieldset>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" value="Submit" ng-disabeled="myForm.$invalid" class="btn btn-primary">Save Changes / Create</button>
<button type="remove" value="Remove" ng-model="deleteProduct()" class="btn btn-primary">Delete</button>
</div>
</div>
</fieldset>
The ng-model part I added doesn't seem to do anything. No matter what I do, I can't get it to call a different function to the Save button. *
*Disclaimer I took over this project and didn't write it from scratch. I've tried crawling through the code and adding things everywhere (with console.log lines added in to see if they ever get called) but I can't seem to crack it. Does anyone have any ideas?
You can use ng-click to assign a click listener in Angular.
<button type="reset" class="btn btn-default" ng-click="cancel()">Cancel</button>
<button type="submit" value="Submit" ng-disabeled="myForm.$invalid" class="btn btn-primary" ng-click="submit()">Save Changes / Create</button>
In your controller find these functions to perform specific operations that you need.
$scope.submit = function() {
console.log("Submit button clicked");
}
$scope.cancel = function() {
console.log("Cancell button clicked");
}
Try ng-click for function call use like
<button ng-click="myFunc()">OK</button>
Some corrections need to be made in your code :
It should be ng-disabled instead of ng-disabeled.
type="remove" is not valid type of the element. Use type="button" with ng-click="remove()"
Working code :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.cancel = function() {
console.log("cancel call");
}
$scope.save = function() {
console.log("save call");
}
$scope.remove = function() {
console.log("remove call");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="myForm">
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default" ng-click="cancel()">Cancel</button>
<button type="submit" value="Submit" ng-disabled="myForm.$invalid" class="btn btn-primary" ng-click="save()">Save Changes / Create</button>
<input type="button" value="Remove" ng-click="remove()" class="btn btn-primary"/>
</div>
</div>
</form>
</div>
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>
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;
};