Question

＆＃13;

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

＆＃13;

.overflow-hidden{ 
  overflow: hidden;
}

md-slider:not(.active) .md-thumb-container{
      transition: transform .4s cubic-bezier(.25,.8,.25,1)!important;    
}

md-slider:not(.active) .md-track-fill{
  transition: width .4s cubic-bezier(.25,.8,.25,1)!important; 
}

＆＃13;

<html lang="en" ng-app="StarterApp">
  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css">
  </head>
  <body layout="column">
    <div>
      <!-- overflow-hidden because the scrolling (known issue) -->
  <md-content class="md-padding overflow-hidden">
    <h3>Demo</h3>
    <div layout>
      <md-slider flex md-discrete step="1" min="1" max="25" aria-label="rating" ng-model="value">
      </md-slider>
      
    </div>
    <p>Value = {{value}}</p>
    
  </md-content>
</div>
    <!-- Angular Material Dependencies -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script>
  </body>
</html>

＆＃13;

虽然当我使用ng-model指令时md-slider中的md-discrete值没有更新，但没有它正常工作。我如何能够使用md-discrete来完成这项工作？

Answer 1

使用md-discrete的重点是仅在ng-model上更新drag end，因为有时我们会运行一个庞大的功能（耗时！）并且每次更改都会运行滑块的ng-model，因此使用md-discrete，默认功能是在拖尾结束后更新。我的建议是，如果您不想要此行为，请使用md-slider而不是md-discrete。

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

.overflow-hidden{ 
  overflow: hidden;
}

md-slider:not(.active) .md-thumb-container{
      transition: transform .4s cubic-bezier(.25,.8,.25,1)!important;    
}

md-slider:not(.active) .md-track-fill{
  transition: width .4s cubic-bezier(.25,.8,.25,1)!important; 
}

<html lang="en" ng-app="StarterApp">
  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css">
  </head>
  <body layout="column">
    <div>
      <!-- overflow-hidden because the scrolling (known issue) -->
  <md-content class="md-padding overflow-hidden">
    <h3>Demo</h3>
    <div layout>
      <md-slider flex step="1" min="1" max="25" aria-label="rating" ng-model="value">
      </md-slider>
      
    </div>
    <p>Value = {{value}}</p>
    
  </md-content>
</div>
    <!-- Angular Material Dependencies -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script>
  </body>
</html>

ng-model不使用md-discrete指令更新md-slider

1 个答案: