Develop Reference

Hiding buttons in angular js based on a state

Am developing an application in angular js and using ui.router.
I would like to hide certain buttons based on a given state.
I have implementend the click event which navigates to the selected state, and i would like when a button has been clicked and is active to be hidden and reappear when the state is not active
I have tried
HTML FOR THE BUTTONS
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
On the controller
$scope.viewAssigned = function () {
$state.go("dash.call.assigned");
}
$scope.viewNew = function () {
$state.go("dash.call.new");
}
How can i alter my controller code to hide and show these buttons using ng-show

You'll need to add information about the state to the controller, through something like $scope.state = $state.current.name
From there, you can use that in an ng-show or ng-if.

You can do this,
<button type="checkbox" ng-click="viewAssigned()" ng-hide="$state.includes('dash.call.assigned')" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus"></i> Assigned calls
</button>
you should have added $state in $rootScope, for this to work.
Inject $state, $rootScope and place this in your app's run block.
$rootScope.$state = $state;

You can use a $scope variable to track the state change.look at the below code
$scope.viewAssigned = function () {
$scope.viewnew = true;
$state.go("dash.call.assigned");
}
$scope.viewNew = function () {
$scope.viewnew = false;
$state.go("dash.call.new");
}
And your HTML code should be like this,
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success" ng-hide="viewnew">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success" ng-hide="!viewnew">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>

You can see when the $state is changing and hide that buttons. On your run() you can use a function similar to this:
myApp.run(function ($rootScope, $state) {
$rootScope.viewnew= false;
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if (toState.name === 'myState') {//toState variable see the state you're going
$rootScope.viewnew = false;
} else {
$rootScope.viewnew = true;
}
});
});
then add this to your buttons:
<button type="button" ng-click="viewNew()" ng-hide="viewnew" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" ng-hide="!viewnew" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
so when your $state change it would hide or show it.

Trying to generate a button-group with Bootsrap and AngularJS to redirect to different URLs

I am trying to create a button group of two (using bootstrap and angularjs) that, when clicking on them, each would redirect to a different URL. I currently have the following code (copied only the relevant pieces):
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>
However, this doesn't work, and I am not sure why. I might not be passing the arguments correctly, but I tried it even without passing the link itself and it still didn't work. Would appreciate any help!

Are you trying to pass the url ?,
if so, then i would be like this :
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(link){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>

Ok so after many many attempts, and with some inspiration from the answers above, I was able to solve it in the following way:
app.controller('LinkController',function($scope){
$scope.go = function(link){
window.location = link;
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button id = Image type="button" class="btn btn-primary"
data-ng-click = "go('Test1.html')">Click1</button>
<button id = Text type="button" class="btn btn-primary"
data-ng-click = "go('Test2.html')">Click2</button>
</div>
Thanks for your help guys.

I don't know much of Angular js, but there are other alternative ways to achieve the same purpose. This works with simple html
<div class="btn-group btn-group-lg">
<input type="button" class="btn btn-primary">Click1</input>
<input type="button" class="btn btn-primary">Click2</input>
</div>
Notice I changed the button element to input, this because a button element can not be placed inside an anchor tag <a>.
I hope this helps

How to properly use ng-init with ng-class

I have a row of buttons and want to initialize the first button as active (as the data associated with it is loaded in my controller's init function). The below HTML works great, but when I click the other two buttons the 'active' class remains on the first button. I want this button set as active on page load and then treated 'normally' (ie: if a different button is clicked remove active class from first button):
<div class="btn-group btn-group-sm">
<button class="btn btn-default" ng-class="{active : isActive}" ng-init="isActive = true" type="button" ng-click="playerMap.clusterToggle(true)">Clustered</button>
<button class="btn btn-default" type="button" ng-click="playerMap.clusterToggle(false)">Unclustered</button>
<button class="btn btn-default" type="button" id="heatmap" ng-click="playerMap.heatmap()">Heatmap</button>
</div>

Should be simple as:
If you are using a loop then its even clean - just pass the index.
<button class="btn btn-default" ng-class="isActive[0] ? 'active' : ''" ng-init="isActive[0]=true" type="button" ng-click="toggleButton(isActive,0)">Clustered</button>
<button class="btn btn-default" ng-class="isActive[1] ? 'active' : ''" type="button" ng-click="toggleButton(isActive,1)">Unclustered</button>
<button class="btn btn-default" ng-class="isActive[2] ? 'active' : ''" type="button" ng-click="toggleButton(isActive,2)">Heatmap</button>

Though this does not answer your initial question, here is a working solution (not very efficient I have to say):
HTML:
<div class='container' ng-controller="GoingStack">
<div switch class="button" ng-class="{'active-button': state}">1</div>
<div switch class="button">2</div>
<div switch class="button">3</div>
</div>
Script:
app.controller('GoingStack', ['$scope', function($scope) {
$scope.state = true;
}]);
var active = document.getElementsByClassName('button');
app.directive("switch", [function() {
return {
link: function(scope, element, attr) {
element.bind('click', function(e){
scope.state = false;
active[0].classList.remove('active-button');
element.addClass('active-button');
});
}
}
}]);

Bootstrap Popover Inside Popover not working

I am using twitter bootstrap to share my post on social media, i have made a link whose popover with some buttons content, but further when i click on buttons in popover, their popover function does not work.
<div class="well text-center">
<button id="but1" title='Popover' class="btn btn-success" rel='popover' data-placement="bottom" data-toggle='popover2'>Share</button>
</div>
<div class='container hide' id='cont'>
<a onclick="Facebook()"
class="btn btn-default">
Facebook
</a>
<a onclick="twitter()"
class="btn btn-default">
Twitter
</a>
<a class="btn btn-default"
data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body"
type="button" data-html="true" href="#" id="login">
Email
</a>
</div>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" placeholder="Name" class="form-control" maxlength="5">
<button type="submit" class="btn btn-primary" onclick="EmailToSomeOne();">Send</button>
</div>
</form>
</div>
and the js
$('#but1').popover({
html: true,
content: $('#cont').html()
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
function Facebook(){
alert('share on facebook');
}
function twitter(){
alert('share on twitter');
}
function EmailToSomeOne(){
alert('Email to send');
}
for more clearing i have created a fiddle also.

Your code works fine. Its just a jsFiddle setting issue.
In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.
See example
When onLoad is selected your functions are defined within the closure of the $(document).ready(function() {}); only. Thats the reason it shows the error Uncaught ReferenceError: Facebook is not defined (see the console)
BTW, here's an equivalent example on plunkrenter link description here

You can simply bind the buttons with an id like
<a id="Facebook"class="btn btn-default">Facebook </a>
and access it using
$("#Facebook").on('click',function(){
alert('share on facebook');
})
EDIT:
You cannot have nested popover in bootstrap.However you can use the below two approaches
1)You can change the html inside the popover and display your email form
$('.popover-content').html($('#emailform').html())
Please refer to the fiddle attached for this appproach
https://jsfiddle.net/mohit181191/mxstLfnf/
2)You can open a modal on popover button click.
<a data-toggle="modal" data-target="#facebook"
class="btn btn-default">
Please refer to the below fiddle for this approach
http://jsfiddle.net/mohit181191/o35zqy7w/

Bootstrap not support the Nested popover
http://getbootstrap.com/javascript/#modals

Use this :
$('body').on('click',".btn-default", function(){
alert('share on facebook');
});
.btn-default change this to your button default id

AngularJS toggle button

I am trying to create a toggle button in Angular. What I have so far is:
<div class="btn-group">
<a class="btn btn-primary pull-right"
ng-click="toggleArchive(true)"
ng-show="!patient.archived">Archive patient</a>
<a class="btn btn-danger pull-right"
ng-click="toggleArchive(false)"
ng-show="patient.archived">Unarchive patient</a>
.... some other buttons ....
</div>
Basically I achieve toggling, by having TWO buttons, and toggling between them. This is causing issues because the ng-hide just adds a display:none style to the button when it's hidden, which is causing me styling issues. Ideally I want to have ONE button, that has it's text, class and function call changed depending on the state of patient.archived.
What's a clean way to achieve this?

You should use ng-class to toggle between classes and bind the text with a regular Angular expression. Also, if your function toggleArchive only toggle the value, you can remove it and toggle the value from an Angular expression:
<a class="btn pull-right"
ng-class="{true: 'btn-primary', false: 'btn-danger'}[!patient.archived]"
ng-click="patient.archived = !patient.archived">
{{!patient.archived && 'Archive' || 'Unarchive'}} patient
</a>

for any other weary traveller...
you could simply have used ng-if. ng-if completely excludes the element from the DOM if false, so you'd have no issues with styles when not displayed. Also there is not really a need for the button group you could just change the text of the button
Something like this:
<button class="btn btn-primary pull-right"
ng-click="toggleArchive(true)"
ng-if="!patient.archived">Archive patient</button>
<button class="btn btn-danger pull-right"
ng-click="toggleArchive(false)"
ng-if="patient.archived">Unarchive patient</button>

It might help you:
<html>
<head>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app>
<div ng-controller="MyCtrl">
<button ng-click="toggle()">Toggle</button>
<p ng-show="visible">Hello World!</p>
</div>
</body>
</html>
function MyCtrl($scope) {
$scope.visible = true;
$scope.toggle = function() {
$scope.visible = !$scope.visible;
};
}

This may Help:
<!-- Include Bootstrap-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<!-- Code -->
Click here to <strong>Toggle (show/hide)</strong> description

<input type="checkbox" class="toggle-button"
ng-model="patient.archived">
Then style the checkbox like a button.
if the toggle needs to do more things, add the following to your patient class:
class Patient {
constructor() {
this.archived = false;
}
...
get angularArchived() {
return this.archived;
}
set angularArchived(value) {
if (value !== this.archived) {
toggleArchived(value);
}
this.archived = value;
}
}
then use
<input type="checkbox" class="toggle-button"
ng-model="patient.angularArchived">

This is the simplest answer I've found. I haven't tried it with animations because I just use it for quick setup.
<a ng-click="scopeVar=scopeVar!=true">toggle</a>
<div ng-show="scopeVar">show stuff</div>
with scopeVar=scopeVar!=true undefined becomes true.