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>
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>
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
My dropdown menu content is covering up my dropdown button, any idea how to fix it? I want it to appear directly underneath my dropdown button. I have tried creating a class and style it in CSS as "position: absolute;" but it doesn't work.
Here is my code in angular:
<div ng-controller="Ctrll" ng-app="Fruit">
<div>
<md-menu>
<md-button ng-click="$mdOpenMenu()">Fruits
</md-button>
<md-menu-content class="dropdown" >
<md-menu-item >
<md-button ng-click="apple()">Apple</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="blueberry()">Blueberry </md-button>
</md-menu-item>
</md-menu>
</md-menu-content>
</div>
</div>
here is my Angular app
angular
.module('Fruit',['ngMaterial'])
.controller('Ctrll', function () {
var originatorEv;
this.openMenu = function($mdOpenMenu, ev) {
originatorEv = ev;
$mdOpenMenu(ev);
};
});
I have added it to codepen. Here is how my code looks like in action. http://codepen.io/zcook/pen/YqramL
Also, does anyone know how to change the color of the background of the dropdown menu content?
why can't you change the CSS property of class .md-open-menu-container.md-active?
.md-open-menu-container.md-active{
top: 45px !important;
}
Check this updated codepen
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 trying to generate a dialogue when an icon is clicked. I get the following error when I click on the md-icon. The dialogue opens, but I see the following error on my console:
TypeError: Cannot read property 'getBoundingClientRect' of undefined
at transformToClickElement (angular-material.js:4652)
at dialogPopIn (angular-material.js:4630)
at Object.onShow (angular-material.js:4538)
at InterimElementFactory.self.show.compilePromise.then.showDone (angular-material.js:1827)
at processQueue (angular.js:13248)
at angular.js:13264
at Scope.$get.Scope.$eval (angular.js:14466)
at Scope.$get.Scope.$digest (angular.js:14282)
at Scope.$get.Scope.$apply (angular.js:14571)
at done (angular.js:9698)
angular-material.js:824 Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
Below is my HTML snippet.
<md-button class="md-fab md-primary" ng-click="showAdvanced($event)"
aria-label="AddClient">
<md-icon md-svg-src="content/images/68448.svg"
style="width: 48px; height: 48px;">
</md-icon>
<md-tooltip md-visible="demo.showTooltip">
Add Client
</md-tooltip>
</md-button>
Controller of the HTML page is below.
$scope.showAdvanced = function(ev) {
$mdDialog.show({
controller: 'newClient',
templateUrl: 'app/views/xyz/newClient.html',
targetEvent: ev
});};
Dialog HTML
<md-content class="md-padding" layout="row" layout-sm="column" style="font-size:1.2em">
<form name="myForm" >
<div layout layout-sm="column">
<md-input-container style="width:80%">
<label>Name</label>
<input ng-model="create.Name">
</md-input-container>
</div>
</md-content>
Thanks
You are missing a wrapping md-dialog tag. According to the docs:
The dialog's template must have an outer md-dialog element. Inside, use an md-content element for the dialog's content, and use an element with class md-actions for the dialog's actions.
Try this:
<md-dialog>
<md-content>
<md-button class="md-fab md-primary" ng-click="showAdvanced($event)" aria-label="AddClient">
<md-icon md-svg-src="content/images/68448.svg" style="width: 48px; height: 48px;"></md-icon>
<md-tooltip md-visible="demo.showTooltip">
Add Client
</md-tooltip>
</md-button>
</md-content>
</md-dialog>