Here is my code: how can I call this function data-clipboard-text="{{sharedLink()}}" only if currentPageShared===true
<md-button ng-click="toggleShare()" ngclipboard
data-clipboard-text="{{sharedLink()}}">
{{(currentPageShared===true) ? 'Stop Sharing Page' : 'Share Page'}}
</md-button>
Try This
data-clipboard-text="{{currentPageShared?sharedLink():""}}"
<md-button ng-click="toggleShare()" ngclipboard data-clipboard-text="{{sharedLink()}}" ng-if="currentPageShared">
Stop Sharing Page
</md-button>
<md-button ng-click="toggleShare()" ngclipboard data-clipboard-text="{{sharedLink()}}" ng-if="!currentPageShared">
Share Page
</md-button>
That should work.
Im my case the solution was to migrate to https://github.com/omichelsen/angular-clipboard
Related
I have the following code:
<md-button class="md-icon-button" aria-label="Favorite" hide-gt-sm ng-click="openLeftMenu()">
<md-icon><i class="material-icons">menu</i></md-icon>
</md-button>
As you can see, inside md-button tag I have md-icon which contains an i element. I want to change the i tag when I click the button. This icon should change back when I click it again. Simply, I want a toggle effect with two icons and I want to achieve this using Angularjs.
You can use ng-switch, like with password redaction:
<md-button ng-switch="vm.isPasswordVisible" ng-click="vm.isPasswordVisible=!vm.isPasswordVisible" ng-class="md-icon-button">
<md-icon ng-switch-when="false" md-font-library="material-icons"> visibility_off </md-icon>
<md-icon ng-switch-when="true" md-font-library="material-icons"> visibility </md-icon>
</md-button>
You can use the ng-class directive
CODE
<md-button class="md-icon-button" aria-label="Favorite" hide-gt-sm ng-click="toggleButton()">
<md-icon><i ng-class="{'material-icons' : toggle, 'material-icons2' : !toggle}">menu</i></md-icon>
</md-button>
CONTROLLER
$scope.toggleButton = function(){
$scope.toggle = !$scope.toggle;
}
You can use a toggle to do this and use the ng-class directive to select class depending on the toggle. Here's how you'd do it-
<div ng-init="icon='class1'">
<md-button class="md-icon-button" aria-label="Favorite" hide-gt-sm ng-click="openLeftMenu()">
<md-icon>
<i ng-class="icon">menu</i>
</md-icon>
</md-button>
</div>
In your openLeftMenu() function, handle the classes on click.
function openLeftMenu() {
...
if(icon==='class1'){
icon = 'class2';
} else {
icon = 'class1';
}
...
}
Here class1 and class2 are your icon classes.
Use a flag value set it to true/false and after clicking on the button change the value accordingly and use following code.
<md-button class="md-primary md-raised" ng-click="openLeftMenu()">
<md-icon md-font-icon ng-class="
{'zmdi zmdi-upload': vm.flag,
'zmdi zmdi-code': !vm.flag
}"></md-icon>
</md-button>
I am using angular material for my ionic app. I came across the fab tool bar and I have included it in my app.
Here is a demo provided in the angular material guide.
FAB toolbar demo.
This is my code:
<md-fab-toolbar md-open=true md-direction='left'>
<md-fab-trigger class="align-with-text">
<md-button aria-label="menu" class="md-fab md-primary">
<md-icon md-svg-src="img/icons/menu.svg"></md-icon>
</md-button>
</md-fab-trigger>
<md-toolbar>
<md-fab-actions class="md-toolbar-tools">
<md-button aria-label="comment" class="md-icon-button">
<md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
</md-button>
<md-button aria-label="label" class="md-icon-button">
<md-icon md-svg-src="img/icons/ic_label_24px.svg"></md-icon>
</md-button>
<md-button aria-label="photo" class="md-icon-button">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg"></md-icon>
</md-button>
</md-fab-actions>
</md-toolbar>
The fab tool bar keeps getting closed whenever we press any button inside its content. Is there any way to keep the FAB toolbar open even after clicking a button inside it?
This looks like an open issue:
https://github.com/angular/material/issues/4973
As mentioned by lj-wizard, there is an open issue on github.
https://github.com/angular/material/issues/5124
You can try using md-fab-speed-dial as the issue does not occur.
https://material.angularjs.org/latest/api/directive/mdFabSpeedDial
If you do not set the animation, the buttons will be permanently visible.
i have used material design class in my app.
<div flex="30" flex-sm="100" ng-repeat="shortListLoad in user.shortListLoads">
<md-button class="md-icon-button md-primary" aria-label="Settings" ng-click="checkShortList(shortListLoad.id)">
<md-icon md-font-icon='icon-favorite' style='color:red'></md-icon>
</md-button>
</div>
I need to change the "md-font-icon" attribute value to 'icon-favorite-outline' while calling the checkShortList() function in controller.
How to do this please suggest a best way in angularjs rather than jquery???
Set flag value in your controller method checkShortList.
Keep a flag in each of the shortListLoad object.
//initially
angular.forEach(user.shortListLoads,function(res){
res.flag = true;
});
$scope.checkShortList = function(shortListLoad,id){
shortListLoad.flag = false;
}
HTML
<md-button class="md-icon-button md-primary" aria-label="Settings" ng-click="checkShortList(shortListLoad,shortListLoad.id)">
<md-icon md-font-icon="{{shortListLoad.flag ? 'icon-favorite' : 'icon-favorite-outline' }}" style='color:red'></md-icon>
</md-button>
I have a menu, but unfortunately, when I click an item, it's not being remembered (i.e. highlighted gray).
<div ng-controller="DropdownCtrl as ctrl">
<md-menu>
<md-button aria-label="Menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
<i class="material-icons">menu</i>
</md-button>
<md-menu-content width="4" ng-model="selected">
<md-menu-item>
<md-button href="home" ria-label="Home">
Home
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button href="about" ria-label="About">
About
</md-button>
</md-menu-item>
<!--<md-menu-divider></md-menu-divider>-->
<md-menu-item>
<md-button href="areas" ria-label="Areas">
Speciality Areas
</md-button>
</md-menu-item>
<md-menu-item>
<md-button href="clients" ria-label="Clients">
Clients
</md-button>
</md-menu-item>
<md-menu-item>
<md-button href="blog" ria-label="Blog">
Blog
</md-button>
</md-menu-item>
<md-menu-item>
<md-button href="latest" ria-label="Latest">
Latest
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
As you can see from the screenshot above, I have clicked "Clients" already, I am on the "clients" page, yet the "Clients" item isn't highlighted!!!
Can anyone share some tips on how to do this in the most lightweight manner?
Here's my controller javascript:
(function () {
'use strict';
angular
.module('app')
.controller('DropdownCtrl', DropdownCtrl);
function DropdownCtrl($scope, $meteor, $mdDialog) {
var vm=this;
vm.date = new Date();
var originatorEv;
vm.openMenu = function($mdOpenMenu, ev) {
originatorEv = ev;
$mdOpenMenu(ev);
};
vm.selected = function(ev){
console.log(ev);
}
};
})();
Solution 1 - The ugly (but fast) one
In order for your menu to be highlighted, you need to tell it to highlight. For this, you need:
Define a css class for highlighted menu button (e.g. .is-active)
Define a function that returns true or false depending on whether a path that you've sent is the current page
In your html, assign the css class defined in point 1 depending on what the current path is
For instance:
<md-button href="clients" ng-class="{'is-active': vm.isCurrentPage('/clients')}">
Clients
</md-button>
And the javascript function:
function isCurrentPage( path ) {
return path === $location.path();
}
Solution 2 - The good (but a bit more complex) one
Save the state of your menu in a service. Thus, you will have access to the state of your application (the current page, previous pages, etc.) from anywhere in your app. The benefit from this approach is that services are singletons in angular and any change that you do to the menu will affect the same object (menu service), thus the state of your app will always be synchronized.
I am using side navigation in my angular application, i am using buttons inside the side navigation with a tool tip on it. But it displays in bottom of the icon, i need it on the right side. I dont see any css attached to it.
Here is the code and plnkr:
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-sm')">
<md-list class="muppet-list">
<md-item ng-repeat="it in muppets">
<md-item-content>
<md-button ng-click="selectMuppet(it)" ng-class="{'selected' : it === selected }">
<img ng-src="{{it.iconurl}}" class="face" alt="">
{{it.name}}
</md-button>
<md-tooltip>
Create Chart
</md-tooltip>
</md-item-content>
</md-item>
</md-list>
</md-sidenav>
SIDE NAVIGATION
I have done it using the md-direction attribute
<md-tooltip md-direction="right">Save</md-tooltip>