Question

我正在使用＆＃34; md-progress-circular＆＃34;我的应用中的组件 - https://material.angularjs.org/latest/demo/progressCircular。但它没有根据屏幕尺寸调整大小。如何使其响应？如果任何人都可以提供相同的插件，将会很有帮助。

<md-progress-circular md-mode="determinate" value="100" md-diameter="47"></md-progress-circular>

Answer 1

以下是如何执行此操作的示例 - CodePen

我们的想法是检查$window的大小调整，然后相应地更改md-progress-circular的直径。

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column">
  <div flex layout="column", layout-align="center center">
    <md-progress-circular md-diameter="{{diameter}}"></md-progress-circular>
  </div>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope, $window, $mdMedia) {
  resizeProgress();

  angular.element($window).bind("resize", function() {
    resizeProgress();
    $scope.$apply();
  });

  function resizeProgress () {
    if ($mdMedia("gt-xs")) {
      $scope.diameter = 200;
    }
    else if ($mdMedia("xs")) {
      $scope.diameter = 100;
    }
  }
});

如何制作＆＃34; md-progress-circular＆＃34;来自Angular材料的组件响应？

1 个答案: