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

0 Downloads
19 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

A Pen by Gabriel Berrios

Gradient Animation

tornado test

Angular Material (Jade)

Universal Nav Template Responsive Demo

A Pen by Ingo Joseph

A Pen by Isaac Gierard

A Pen by Aaron Olin