Item: A Pen by wanfeichao
Rating: 3.4
Author: 0xfc

0 Downloads
15 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  wanfeichao</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html ng-app="TestMd">
<head>
  <meta charset="UTF-8">
  <title>MD</title>
  <link rel="stylesheet" type="text/css" href="http://7xlphe.com1.z0.glb.clouddn.com/angular-material.min.css">
  
  <script type="text/javascript" src="http://7xlphe.com1.z0.glb.clouddn.com/angular.min.js"></script>
<script type="text/javascript" src="http://7xlphe.com1.z0.glb.clouddn.com/angular-material.min.js"></script>
<script type="text/javascript" src="http://7xlphe.com1.z0.glb.clouddn.com/angular-aria.min.js"></script>
<script type="text/javascript" src="http://7xlphe.com1.z0.glb.clouddn.com/angular-animate.min.js"></script>
</head>
<body>
  <div ng-controller="MdController">
   <md-button class="md-raised md-accent" ng-click="showDialg()">
          Show Progress Dialog
        </md-button>
  </div>
  <script type="text/ng-template" id="uploadProgressDialog.html">
  <md-dialog aria-label="FileUpload">
      <md-dialog-content>
        <h3>文件上传</h3>
        <md-progress-linear md-mode="determinate" value="{{ vm.progress }}"></md-progress-linear>
        <br>
        <div layout="row" layout-align="end center">
        	<md-button class="md-raised md-accent" ng-click="vm.close()">
          关闭
        </md-button>
      </div>
      </md-dialog-content>
  </md-dialog>
</script>
</body>
</html>
  
  

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




</body>

</html>


/*Downloaded from https://www.codeseek.co/0xfc/a-pen-by-wanfeichao-grkxkr */
md-dialog {
  width: 500px;
}


/*Downloaded from https://www.codeseek.co/0xfc/a-pen-by-wanfeichao-grkxkr */
angular.module('TestMd',['ngMaterial'])
  .controller('MdController', MdController)
  .controller('UploadProgressDialogCtrl', UploadProgressDialogCtrl);

function MdController($scope, $mdDialog) {
  $scope.showDialg = function() {
    $mdDialog.show({
      templateUrl: 'uploadProgressDialog.html',
      controller: 'UploadProgressDialogCtrl',
      controllerAs: 'vm',
    });
  };
}

function UploadProgressDialogCtrl($mdDialog, $interval) {
  var vm = this;
  
  vm.progress = 0;
  
  vm.close = function() {
    $mdDialog.cancel();
  }
  
  vm.progress += 10;
  vm.progress += 10;
  vm.progress += 10;
  vm.progress += 10;
  vm.progress += 10;
  vm.progress += 10;
  
  // $interval(function() {
  //   vm.progress += 10;
  // }, 100);
  
  vm.progress += 10;
  vm.progress += 10;
  vm.progress += 10;

}

Comments

More from 0xfc

A Pen by wanfeichao

Technologies

Comments

More from 0xfc

A Pen by wanfeichao

A Pen by wanfeichao

A Pen by wanfeichao

css布局2

You Might Also Like

Flexbox Examples

Data Point Map

A Pen by Michalis Mouzakitis

Date Methods

Java script

Screen Capture an HTML Element and Save as a Downloadable PNG

TributePage1

A Pen by Marco