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!
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.
Here is my code:-
<div class="input-group">
<input class="form-control" ng-model="name" required />
<span class="input-group-btn">
<button class="btn btn-primary" type="button" >
<i class="fa fa-plus"></i>
</button>
</span>
</div>
Here I am using bootstrap class input-group which contains two elements i.e <input> and <span>
So here I want to show that button on mouse hover.
So I tried by using ng-mouseover
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-mouseover="open" >
<i class="fa fa-plus"></i>
</button>
</span>
Where open is :-
$scope.open = true;
I think ng-mouseover is better option but if is there any other simple way.... please tell me
var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
$scope.open = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<div ng-mouseover="open = true" ng-mouseleave="open = false">
To display button mouseover here!!!
<button class="btn btn-primary" type="button" ng-show="open">
<i class="fa fa-plus">Button</i>
</button>
</div>
</div>
try this. also you can use :hover for show/hide element.
<button class="btn btn-primary" type="button" ng-show="open" ng-mouseover="open = true" >
<i class="fa fa-plus"></i>
</button>
My Angular code
<div ui-tree="rootTree" data-drag-enabled="false">
<ol ui-tree-nodes="" ng-model="course.sections" ng-class="{hidden: collapsed}">
<li ng-repeat="section in course.sections" ui-tree-node> <div ui-tree-handle class="tree-node tree-node-content" ng-click="editSection(section)" >
<a class="btn btn-success btn-xs"ng-if="section.sectionInstances && section.sectionInstances.length > 0" data-nodrag ng-click="toggle(this)">
<span class="glyphicon glyphicon-chevron-down" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed }">
</span>
</a>
{{section.sec_name}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeSection(section)">
<span class="glyphicon glyphicon-remove">
</span>
</a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="addSectionInstance(section)" style="margin-right: 8px;">
<span class="glyphicon glyphicon-plus">
</span>
</a>
</div>
</li>
</ol>
</div>
If i use data-drag-enabled="false", then ng-click function is calling. I want both the function drag and drop as well as ng-clik function.
If you are just wanting to perform functionality on 'dragStart', then it appears according to the angular-ui-tree documentation, that you can define treeOptions in your controller and assign them to your tree directive attribute value.
myAppModule.controller('MyController', function($scope) {
$scope.treeOptions = {
dragStart: function(sourceNodeScope, destNodesScope, destIndex) {
// Do things here
},
dragEnd: function(sourceNodeScope, destNodesScope, destIndex) {
}
};
});
<div ui-tree="treeOptions">
<ol ui-tree-nodes ng-model="nodes">
<li ng-repeat="node in nodes" ui-tree-node>{{node.title}}</li>
</ol>
</div>
same trouble here, few years after.
Sean answer doesn't seem to answer the question.
issue:
* with drag n drop enable: I can't use ng-click to remove/edit a node, but I can drag n drop it.
* w/o drag n drop enable: my ng-click works.
Solution:
move the "ui-tree-handle" from the global div to specific location w/o any ng-click in.
There are 2 div tags, i want to display only 1 based on value of SelectedVariant.InCart.
Code is as follows:
<div ng-if="1==0">
<a class="btn btn-success btn-md" ng-click="AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div ng-if="1==1">
<a class="btn btn-default btn-xs" ng-click="PlusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-plus"></span>
</a>
<button type="button" class="btn btn-info disabled">{{3+2}} in cart</button>
<a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
<a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
But it displaying both the div elements. Can someone help me what is the issue?
your angular version is 1.0.7. directive ng-if is not in this version of angular.
its introduce in angular 1.1.5
check it in angular under Directives topic change log
AngularJS first added the ngIf directive in 1.1.5
please update the angular version and that will solve your problem. :)
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?