Item: md-menu-item with ng-if: true
Rating: 3.4
Author: 1kohei1

0 Downloads
40 Views
Tweet
Download Now View Demo

HTML
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>md-menu-item with ng-if: true</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  
  <link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc4/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.0-rc4/docs.css'>

  
  
</head>

<body>

  <div ng-controller="AppController as controller" ng-app="app" layout="column">
  <md-menu>
    <md-button class="md-raised md-primary" ng-click="$mdOpenMenu($event)">
      Import Button
    </md-button>
    <md-menu-content width="4">
      <md-menu-item>
        <md-button> 
          Option 1
        </md-button>
      </md-menu-item>
      <md-menu-item>
        <md-button>
          Option 2
        </md-button>
      </md-menu-item>
      <md-menu-item ng-if="true">
        <md-button keep-width>
          Sample Button
        </md-button>
      </md-menu-item>
    </md-menu-content>
  </md-menu>

</div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/1kohei1/md-menu-item-with-ng-if-true-jrqjRy */
var app =   angular.module('app', ['ngMaterial'])
app.controller('AppController', AppController);

function AppController() {
  var _this = this;
}

app.directive('keepWidth', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var width = element.prop('offsetWidth');
      var otherCss = element.css('cssText');

      attrs.$set('style', 'width: ' + width + 'px;' + otherCss);
    }
  };
});

Comments

More from 1kohei1

md-menu-item with ng-if: true

In this example below you will see how to do a md-menu-item with ng-if: true with some HTML / CSS and Javascript

Technologies

Comments

More from 1kohei1

SVG.js playground

RxJS playground

RxJS drag capture drag complete

Observable connect

You Might Also Like

SVG Blurring Filter Demonstration

WSB v7 Product Image Hover Effect

Video Popup onClick Autoplay

Especifidad en CSS

#codevember 8 - BezierCurves

A Pen by Hailjake

Blank Bootstrap v3.2

Dots and Boxes