如何为数值滑块设置固定默认值（非随机，支持数据库读取）

看起来你在用Angular Material的滑块组件时遇到了默认值的问题——现在页面加载时是随机值，想要设置固定默认值，还打算从数据库获取初始值对吧？我来帮你梳理一下解决方案：

一、先搞定固定默认值 #

你现在滑块显示随机值的原因很明确：控制器里的$scope.disabled1 = Math.floor(Math.random() * 50);这行代码把绑定的变量设成了随机数。而且Angular的ng-model优先级比原生HTML的value属性高，所以你给input加value="17"根本不起作用。

正确的做法是：

1. 修改控制器里的赋值，把随机数换成你想要的固定值：

// 替换原来的随机代码，直接设置固定默认值
$scope.disabled1 = 17;

2. 保持HTML里的双向绑定，去掉input上的value属性（ng-model会自动同步滑块和输入框的值）：

<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" min="1" max="50" aria-label="green" aria-controls="green-slider">
  </md-input-container>
</md-slider-container>

这样页面加载时，滑块和输入框就会默认显示17了。

二、从数据库获取默认值（仅HTML标签实现方案） #

如果你的HTML是后端渲染的（比如PHP、Java、Python后端），可以用ng-init指令在HTML层面直接初始化变量值，把数据库取到的值渲染进去就行。

举个例子，假设后端从数据库拿到的默认值是{{defaultValue}}（不同后端模板语法不同，比如PHP是<?php echo $dbValue; ?>），你可以这么写：

<md-slider ng-model="disabled1" aria-label="Disabled 1" md-discrete="" min="1" max="50" ng-init="disabled1 = {{defaultValue}}">
</md-slider>

ng-init会在指令初始化时给disabled1赋值，这样就不需要在控制器里硬编码，直接从数据库获取初始值了。

⚠️ 注意：如果是前端异步请求数据库数据（比如用Angular的$http），那没法仅用HTML实现，必须在控制器里写请求逻辑，拿到数据后给$scope.disabled1赋值。但如果是后端渲染HTML的场景，上面的ng-init方案完全符合你“仅通过HTML标签实现”的需求。

内容的提问来源于stack exchange，提问作者Prajna Hegde