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>
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?
I have the following condition set in my grid-butto-listchecks.html file, but it doesn’t disable the row in the search results. Do you know what might be wrong? I know the controller that I'm using is the correct controller.
HTML file
<div class="ui-grid-cell-contents">
<button title="Edit" type="button" class="btn grid-icon btn-xs btn-primary" ng-disabled="row.entity.ClaimStatusDescription=='Submit to Corporate GL'" ng-click="grid.appScope.gridCtrl.editRow(grid, row,row.entity.CheckDepositHeaderId)">
<i class="fa fa-edit"></i>
</button>
<button title="View" type="button" class="btn grid-icon btn-xs btn-primary" ng-click="grid.appScope.gridCtrl.viewRow(grid, row)">
<i class="fa fa-file-text"></i>
</button>
<button title="Delete" type="button" class="btn grid-icon btn-xs btn-primary" ng-disabled="row.entity.ClaimStatusDescription=='Submit to Corporate GL'" ng-click="grid.appScope.gridCtrl.deleteRow(grid, row)">
<i class="fa fa-trash "></i>
</button>
</div>
Grid button field
{ field: 'CheckDepositHeaderId', name: '', cellTemplate: root + 'template/Check_Deposit/grid-butto-ListChecks.html', width: 90 },
You can see in the search results that I have that description coming out in the row (see image).
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"
Search button html code.
<button type="button" class="btn form-control customSelect dropdown-toggle" dropdown-toggle="" ng-disabled="disabled" aria-haspopup="true" aria-expanded="false">
<span class="custom-text ng-binding">Initial Status</span><span class="glyphicon glyphicon-chevron-down"></span>
</button>
Other button html code
<button type="button" class="btn form-control customSelect dropdown-toggle" dropdown-toggle="" ng-disabled="disabled" aria-haspopup="true" aria-expanded="false">
<span class="custom-text ng-binding">No Filter</span><span class="glyphicon glyphicon-chevron-down"></span>
</button>
Please help me.
Try this :
var searchbtn = element.all(by.css('.btn')).get(0);
searchbtn.click();
or
var searchbtn = element.all(by.type('button')).get(0);
searchbtn.click();
Here get(0) means first button.