I have a simple directive using button groups from Bootstrap. I'm using transclude so I can add in more buttons for certainly layouts. This all works like a champ, but I need to remove the transclude div so that it doesn't mess up the button group layout.
So the directive renders out this:
<div class="btn-group ng-isolate-scope">
<button class="btn btn-default">Save</button>
<button class="btn btn-default">Cancel</button>
<div ng-transclude="">
<button class="btn btn-danger"Delete</button>
</div>
</div>
What I want is this:
<div class="btn-group ng-isolate-scope">
<button class="btn btn-default">Save</button>
<button class="btn btn-default">Cancel</button>
<button class="btn btn-danger">Delete</button>
</div>
I found this article but It's a bit outdated and references deprecated functions in compile. Can someone point me in the right direction?
Related
I am managing an angular ng-show event on a button click to show a div element in the DOM. How can I reset the to hide the div if user clicks anywhere else in the DOM other than on the button.
I am currently using angular ver- 1.5.8. Help is highly appreciated.
<div class="panel-wrapper collapse in">
<div class="panel-body">
<a class="btn btn-success btn-outline m-t-10 collapseble" style="margin:1px" ng-repeat="author in authorsData" ng-click="showRoles(author.id, author.contribution_role)">{{author.name}}</a>
</div>
<div class="m-t-15" ng-show="roles.length > 0">
<button class="btn btn-outline btn-info btn-xs waves-effect" style="margin:1px" ng-repeat="role in roles">{{role}}</button>
</div>
</div>
You can use ng-blur directive for this.
Example:
<div >
<input type="button" value="Click" ng-click="set=true" ng-blur="set=false"/>
</div>
<div ng-show='set==true'>
Clicked
</div>
Hope you are able to manage ng-show events using this code.
I'm using uib-collapse, and it works great! I just wish that I could control that I don't have more than one open div, and it seems that accordion is the way to go.
However, I found it terribly hard to apply styles on uib-accordion.
Is there a way to apply the same effect using only uib-collapse?
Yes you can, just manage the collapsed state with an array. Keep in mind the uib-collapse attribute controls whether the element is collapsed. So you markup would look like:
<button type="button" class="btn btn-default" ng-click="collapseToggle(0)">Toggle collapse 0</button>
<div uib-collapse="!isCollapsed[0]">
<div class="well well-lg">Some content</div>
</div>
<br />
<button type="button" class="btn btn-default" ng-click="collapseToggle(1)">Toggle collapse 0</button>
<div uib-collapse="!isCollapsed[1]">
<div class="well well-lg">Some content</div>
</div>
<br />
<button type="button" class="btn btn-default" ng-click="collapseToggle(2)">Toggle collapse 0</button>
<div uib-collapse="!isCollapsed[2]">
<div class="well well-lg">Some content</div>
</div>
And the controller bits:
$scope.isCollapsed = [];
$scope.collapseToggle = function(id) {
// if toggeling the same collapse
// just close it.
if ($scope.isCollapsed[id]) {
$scope.isCollapsed.length = 0;
return;
}
$scope.isCollapsed.length = 0;
$scope.isCollapsed[id] = true;
}
Here is a plunk demonstrating this approach.
I'm trying to add buttons to my inline form using ng-repeat directive.
It is working but buttons lose spacing between them when using ng-repeat.
If I remove ng-repeat and just add exactly identical html for buttons myself then spacing between buttons is ok.
Here is jsfiddle.
If is very strange as resulting html is absolutely identical.
Let's take a look at the rendered HTML...
First the non-angular:
<div class="form-inline">
<div class="button-wrapper">
<button type="button" class="btn btn-default">
<span>123</span>
</button>
</div>
<div class="button-wrapper">
<button type="button" class="btn btn-default">
<span>123</span>
</button>
</div>
<div class="button-wrapper">
<button type="button" class="btn btn-default">
<span>123</span>
</button>
</div>
</div>
And now the Angular:
<div class="form-inline ng-scope" ng-controller="MyCtrl">
<!-- ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
<button type="button" class="btn btn-default">
<span class="ng-binding">123</span>
</button>
</div><!-- end ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
<button type="button" class="btn btn-default">
<span class="ng-binding">456</span>
</button>
</div><!-- end ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
<button type="button" class="btn btn-default">
<span class="ng-binding">789</span>
</button>
</div><!-- end ngRepeat: button in buttons -->
</div>
See the difference? There are line breaks and code alignment spaces between the button-wrapper divs in the hand-typed HTML, but none in the HTML rendered by the ng-repeat. Those line breaks and spaces are visually rendered as a single space between each div. This can be demonstrated by removing the line breaks between the divs on the hand-typed HTML. I believe the intention of bootstrap is to render without space between buttons unless explicitly defined.
This other question addresses how to eliminate the spaces
I see the example in fiddle but if you remove the div line get the same alination.
however I was having many problems with the Bootstrap styles in ng-repeat in my case the solution was put the style="display: inline-block;" in the div with the ng-repeat directive
<div class="button-wrapper" ng-repeat="button in buttons" style="display: inline-block;">
<button type="button" class="btn btn-default">
<span>{{button}}</span>
</button>
</div>
Thanks to #Lathejockey81 answer I finally realized a valid solution.
After each button except last we need to insert an empty div with display: inline-block. This div must be last tag inside the ng-repeated tag.
<div class="form-inline" ng-controller="MyCtrl">
<div class="button-wrapper" ng-repeat="button in buttons">
<button type="button" class="btn btn-default">
<span>{{button}}</span>
</button>
<div ng-show="!$last" style="display: inline-block;"></div>
</div>
</div>
Updated working fiddle.
I have found a tutorial on how to work with the angular js, but when I try to implement it into my work, I do not get the same results.
Here is the original:
jsfiddle
And here is my work:
jsfiddle
Also, how can I get the values from the selected button with javascript (question, suggestion...)?
<div class="btn-toolbar">
<div name="cate" class="btn-group" required="required">
<button class="btn" href="#"><i class="icon-coffee"></i> Question</button>
<button class="btn" href="#"><i class="icon-plus-sign-alt"></i> Suggestions</button>
<button class="btn" href="#"><i class="icon-stethoscope"></i> Product Support</button>
</div>
<span class="label label-danger" data-ng-show="submitted && helpForm.cate.btn.$error.required">Required!</span>
Thank you!
As #charlietfl said in the comments one way is to roll your own, the other is to use one of the libraries floating around like: http://mgcrea.github.io/angular-strap/#/tooltips#buttons, which is by far the best option as they normally have fixed a lot of the possible bugs you may come across.
If you want to roll your own I have build a simplistic example here: http://codepen.io/SimeonC/pen/Lzjis
<div class="btn-group">
<button type="button" ng-click="toggle = 'question'" ng-class="{active: toggle == 'question'}" class="btn btn-default"><i class="icon-coffee"></i> Question</button>
<button type="button" ng-click="toggle = 'suggestions'" ng-class="{active: toggle == 'suggestions'}" class="btn btn-default"><i class="icon-plus-sign-alt"></i> Suggestions</button>
<button type="button" ng-click="toggle = 'support'" ng-class="{active: toggle == 'support'}" class="btn btn-default"><i class="icon-stethoscope"></i> Product Support</button>
</div>
EDIT In response to the comment, making this button 'required' is a matter of manual validation. Something like the following:
HTML:
<span class="label label-danger" ng-show="!toggle || toggle.length <= 0">Required!</span>
In the submit function of the form use:
if(!$scope.toggle || $scope.toggle.length <= 0) // prevent submission!
What is wrong with this simple ng-show directive? It should be simple as I have to buttons hidden using ng-show and when a third button is clicked these two buttons will show So they are hidden until a button is clicked
javascript
$scope.addQuestion = function () {
$('button#addQuestion').click(function(){
$scope.addQuestion = true;
console.log("clicked");
})
}
HTML
<div class="program-edit-btns well">
<!--These two buttons are hidden until the third button is clicked-->
<div class="btn-group pull-left" ng-show="addQuestion()">
<button type="button" class="btn btn-remove"><i class="fa fa-plus"></i> add</button>
<button type="button" class="btn btn-remove"><i class="fa fa-files-o"></i> copy</button>
</div>
<!--This button triggers the ng-show-->
<button id="addQuestion" type="button" class="btn btn-remove pull-left">
<i class="fa fa-plus"></i> question
</button>
</div>
You got a mix and match.. You just need this:-
No more jquery click event handler, just add a handler function, set the variable on the scope:-
$scope.addQuestion = function () {
$scope.showQuestion = true;
}
and ng-show="showQuestion" on the section and ng-click="addQuestion()" on the trigger.
<div class="program-edit-btns well">
<!--These two buttons are hidden until the third button is clicked-->
<div class="btn-group pull-left" ng-show="showQuestion">
<button type="button" class="btn btn-remove"><i class="fa fa-plus"></i> add</button>
<button type="button" class="btn btn-remove"><i class="fa fa-files-o"></i> copy</button>
</div>
<!--This button triggers the ng-show-->
<button id="addQuestion" ng-click="addQuestion()" type="button" class="btn btn-remove pull-left">
<i class="fa fa-plus"></i> question
</button>
</div>
If you want to modify the scope inside a Jquery function, you have to call the $apply method manually
$scope.addQuestion = function () {
$('button#addQuestion').click(function(){
$scope.addQuestion = true;
$scope.$apply();
console.log("clicked");
})
}
But I am pretty sure you don't need JQuery to accomplish what you want.