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

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

Cute Punnies

Perfil TDH

TableFilter sort numeric column with empty values

Poly Template [WIP]

Task 52

Critical bug Gong

Image / Album Gallery

Material background