I need show, hide using two buttons. my requirement is,
when click -> Button A , it should be hide, Button B should be show
when click -> Button B , it should be hide, Button A should be show.
i am tying to do it with some other conditions. please check my code.
<button class="btn btn-primary btn-flat pull-right"
ng-if='(detailCustomter.clientCustomer.customerFlag===false) && accessRights.includes("FLAG_CUSTOMER")'>
<i class="ion ion-flag"></i> Button A
</button>
<button class="btn btn-danger btn-flat pull-right"
ng-if='(detailCustomter.clientCustomer.customerFlag===true ) && accessRights.includes("UNFLAG_CUSTOMER")'>
<i class="ion ion-flag"></i> Button B
</button>
if you can do this using ng-if attribute, that's good.
You can have a variable that represents the current condition and change it's value to the opposite on click.
Of course you will need to adjust the condition to your application.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.condition = true;
$scope.toggle = function() {
$scope.condition = !$scope.condition;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<button class="btn btn-primary btn-flat pull-right"
ng-click="toggle()"
ng-if="condition">
<i class="ion ion-flag"></i> Button A
</button>
<button class="btn btn-danger btn-flat pull-right"
ng-click="toggle()"
ng-if="!condition">
<i class="ion ion-flag"></i> Button B
</button>
</div>
</div>
Related
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>
I want to toogle value on click, so if value of $scope.customize is false then it should set as true & vice versa.
$scope.customize = false;
<div ng-if="customize">
<button class="btn btn-sm btn-success">Save</button>
<button class="btn btn-sm btn-primary">Add</button>
</div>
<span title="Customize" ng-click="????">Customize</span>
What to code in span ng-click to toggle values?
ng-click="customize = !customize"
I've got a simple ui-bootstrap modal with a template like this:
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
{{body}}
</div>
<div class="modal-footer">
<button class="btn btn-default"
ng-click="cancel()">
Cancel
</button>
<button class="btn btn-primary"
ng-click="ok()">
OK
</button>
</div>
Default behaviour of the modal is that the modal is closed if I press Escape. In the same way, I want the ok() method to be triggered if I press Enter. How do I do that?
Thanks to Diana R who led me to this answer:
I can use a ng-enter directive, as described here: https://gist.github.com/EpokK/5884263
That will allow my modal to listen fors the Enter key. But focus needs to be in the modal for it to work. So I also create a directive that I call focused:
angular.module('webApp').directive('focused', function ($timeout, $parse) {
return {
link: function ($scope, element, attributes) {
var model = $parse(attributes.focused);
$scope.$watch(model, function (value) {
if (value === true) {
$timeout(function () {
element[0].focus();
});
}
});
// set attribute value to 'false' on blur event:
element.bind('blur', function () {
if (model && model.assign) {
$scope.$apply(model.assign($scope, false));
}
});
}
};
});
Then I update my modal template so that it looks like this:
<div ng-enter="ok()">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
{{body}}
</div>
<div class="modal-footer">
<button class="btn btn-default"
ng-click="cancel()">
Cancel
</button>
<button class="btn btn-primary"
focused="true"
ng-click="ok()">
OK
</button>
</div>
</div>
Since the focused="true" directive is inside the wrapping div with the ng-enter directive, the enter key will trigger the ok() method.
If you are looking for more 'out-of-the box' solution I recommend using ng-focus-if.
It is far more capable, but here it could be used to focus the desired element. Just mark the confirmation button:
<div class="modal-footer">
<button class="btn btn-default" ng-click="$dismiss()">
Cancel
</button>
<button class="btn btn-primary" ng-click="$close()" focus-if>
OK
</button>
</div>
Now by clicking either space or enter will trigger the OK button. You can also navigate with tab button.
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.
I have the following
<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>
When we click on the + sign, it gives me a panel with 2 buttons. These buttons are set to default. But i want to have a function that sets the button to primary whenever clicked(active), and go back to default when it is unclicked or another button is clicked.
How do i achieve this functionality?
Just use ng-class, along with the variables you are already setting to toggle display:
<button type="button" ng-class="{'btn-primary': display.academic}" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" ng-class="{'btn-primary': display.appliedsciences}" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>
Here is a working demo: http://plnkr.co/edit/cAqxxmaS7pjfhfSgCsWL?p=preview
Note: I took a shot at consolidating some of the logic in the showMoreFunc function. I think this works, but your original code worked perfectly well with ng-class:
$scope.showMoreFunc = function(view) {
$scope.display.appliedsciences = (view == "appliedsciences" && !$scope.display.appliedsciences);
$scope.display.academic = (view == "academic" && !$scope.display.academic);
}
Using the Buttons (Radio) from http://angular-ui.github.io/bootstrap/ :
Change
<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" ng-model="academic">Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" ng-model="appliedsciences">Applied Sciences</button>
to
<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" ng-model="radioModel" btn-radio="'Left'">Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" ng-model="radioModel" btn-radio="'Right'">Applied Sciences</button>
and in your controller add
$scope.radioModel = 'Left';
Result, if btn Academic is 'active'
and this if btn Applied Sciences is 'active'
I think best way is using pure css to deal with this.
.btn:focus{
outline: 0 !important;
}
.btn:active {
outline:0;
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}
I wrote a simple plnkr demo with bootstrap 3.1, when you clicking default button, It will change to primary color.
checkout http://plnkr.co/edit/KJR8xL?p=preview
This will work
<button type="button" ng-class="{'btn-primary': display.academic}" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" ng-class="{'btn-primary': display.appliedsciences}" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>