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"
Related
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>
Can some on tell me if there is smething wrong with the below code as I am unable to get the buttons toggled
<div class="modal-footer textAlignLeft">
<button type="button" class="btn btn-sm btn-default"
name="close" ng-show="!closeHidden"
ng-click="cancel()">CLOSE</button>
<button type="button" class="btn btn-sm btn-default"
name="cancel" ng-show="closeHidden"
ng-click="cancelUpload()">CANCEL</button>
<button type="button" class="btn btn-sm btn-primary marLeft10"
name="attachfile" id="uploadBtn"
ng-click="attach()" ng-disabled="attachDisabled">
{{ resource["common.attachbtn"] }}
</button>
</div>
Once I click on attach button, I want the close button to disappear and the cancel button to show up. But it always shows only the close button though I see the scope variable scope.closeHidden updated to true in my code. Any hints?
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>
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>