Mohamed Qassim Mohamed Qassim - 27 days ago 29
AngularJS Question

Angular Material with $watch

<md-menu id="user-status-menu" md-position-mode="{{vm.position}}" md-offset="{{vm.offset}}">


I want to update md-position-mode and md-offset value from controller dynamically.
but it's work only first time when page load.

How can update and make effect when value changed ?!

Answer

First view the snippet in Full Page view, its to the right of "Run Snippet". Click "Run Snippet" Then Click "Full Page"

  1. Change 0 -5 to 0 50 moves down
  2. Change 0 -5 to 50 -5 moves right
  3. Change target target to target-right target and 0 -5 to "" the menu is on the right

mdMenu

var myApp = angular.module('myApp', ['ngMaterial']);

myApp.controller('myController',
  function myController($scope, $mdDialog){
  $scope.vm = {
   "position": "target target",
    "offset": "0 -5"
  };
  
  var originatorEv;
  $scope.openMenu = function($mdOpenMenu, ev) {
      originatorEv = ev;
      $mdOpenMenu(ev);
    };
  
  $scope.announceClick = function(index) {
      $mdDialog.show(
        $mdDialog.alert()
          .title('You clicked!')
          .textContent('You clicked the menu item at index ' + index)
          .ok('Nice')
          .targetEvent(originatorEv)
      );
      originatorEv = null;
    };
  
});
.menudemoMenuPositionModes .md-menu-demo {
  padding: 24px; }

.menudemoMenuPositionModes .menu-demo-container {
  min-height: 200px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<div ng-app="myApp">
  <div ng-controller='myController'>
    Position: <input type="text" name="position" ng-model="vm.position">
    Offset: <input type="text" name="offset" ng-model="vm.offset">
    <p>$scope.vm = {{ vm | json }};</p>
    
      <div layout="column" flex-xs="100" flex-sm="100" flex="33" layout-align="center center">
        <p>Target mode with <code>md-offset</code></p>
        <md-menu md-position-mode="{{vm.position}}" md-offset="{{vm.offset}}">
          <md-button class="md-raised md-primary" aria-label="Open demo menu" ng-click="openMenu($mdOpenMenu, $event)">
            Open
          </md-button>
          <md-menu-content width="4">
            <md-menu-item ng-repeat="item in [1, 2]">
              <md-button ng-click="announceClick($index)"> <span md-menu-align-target>Option</span> {{item}} </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
      </div>
    
  </div>
</div>

Comments