NG-模式不更新MD-滑蓋MD-離散指令

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 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>

而滑動ng-model值未md-slider更新時，我使用md-discrete指令，沒有它的工作的罰款。我如何能夠通過md-discrete獲得這項工作？

來源

2017-09-16 Durga

出了什麼問題？ ng-model正在上面的代碼中更新。 – Vivz

@Vivz當滑動ng模型沒有更新時，在拖動結束只更新 – Durga

整點使用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>

來源

2017-09-16 11:02:54

我也想md-discrete，它表示當前的步驟值 – Durga

@Durga那麼你需要修改'angular-material'的內部不是明智的做法！ –

NG-模式不更新MD-滑蓋MD-離散指令

回答

相關問題