Html 如何为数字滑块提供默认值(它不应该是随机的)?
我有一个数字滑块的代码。我可以为滑块指定最小值和最大值,但无法在加载页面时将特定值指定为默认值。我可以给出随机值,但我希望它是固定值,因为我们给出的是value=“number” 我计划从数据库中获取滑块的默认值。因此,请让我知道只使用html标记的方式。Html 如何为数字滑块提供默认值(它不应该是随机的)?,html,angularjs,Html,Angularjs,我有一个数字滑块的代码。我可以为滑块指定最小值和最大值,但无法在加载页面时将特定值指定为默认值。我可以给出随机值,但我希望它是固定值,因为我们给出的是value=“number” 我计划从数据库中获取滑块的默认值。因此,请让我知道只使用html标记的方式。 angular.module('MyApp',['ngMaterial','ngMessages','material.svgAssetsCache'])) .controller('AppCtrl',函数($scope){ $scop
angular.module('MyApp',['ngMaterial','ngMessages','material.svgAssetsCache']))
.controller('AppCtrl',函数($scope){
$scope.color={
红色:Math.floor(Math.random()*255),
绿色:Math.floor(Math.random()*255),
蓝色:Math.floor(Math.random()*255)
};
$scope.rating1=3;
$scope.rating2=2;
$scope.rating3=4;
$scope.disabled1=Math.floor(Math.random()*50);
$scope.invert=Math.floor(Math.random()*50);
});
使用ng init将默认值设置为disabled1范围变量。
看
<meta charset='UTF-8'><meta name="robots" content="noindex">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.9/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.9/docs.css'>
</head>
<body>
<div ng-controller="AppCtrl" ng-cloak="" class="sliderdemoBasicUsage" ng-app="MyApp">
<md-content style="margin: 16px; padding:16px">
<div style="margin-top: 50px;"></div>
<md-slider-container>
<md-icon md-svg-icon="device:brightness-low"></md-icon>
<md-slider ng-model="disabled1" aria-label="Disabled 1" md-discrete="" min="1" max="50">
</md-slider>
<md-input-container>
<input type="number" ng-model="disabled1" value="17" min="1" max="50" aria-label="green" aria-controls="green-slider">
</md-input-container>
</md-slider-container>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.9/angular-material.js'></script>
<script >
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function ($scope) {
$scope.color = {
red: Math.floor(Math.random() * 255),
green: Math.floor(Math.random() * 255),
blue: Math.floor(Math.random() * 255)
};
$scope.rating1 = 3;
$scope.rating2 = 2;
$scope.rating3 = 4;
$scope.disabled1 = Math.floor(Math.random() * 50);
$scope.invert = Math.floor(Math.random() * 50);
});
</script>
</body>
</html>
<div ng-controller="AppCtrl" ng-init="disabled1=10" ng-cloak="" class="sliderdemoBasicUsage" ng-app="MyApp">
<md-content style="margin: 16px; padding:16px">
<div style="margin-top: 50px;"></div>
<md-slider-container>
<md-icon md-svg-icon="device:brightness-low"></md-icon>
<md-slider ng-model="disabled1 " aria-label="Disabled 1" md-discrete="" min="1" max="50">
</md-slider>
<md-input-container>
<input type="number" ng-model="disabled1" value="17" min="1" max="50" aria-label="green" aria-controls="green-slider">
</md-input-container>
</md-slider-container>
</div>