Как задать значение по умолчанию для числового слайдера (оно не должно быть случайным)? - PullRequest
Новая
       2

Как задать значение по умолчанию для числового слайдера (оно не должно быть случайным)?

0 голосов
/ 28 мая 2018

У меня есть код для числового слайдера.Я могу указать минимальное и максимальное значение для слайдера, но не могу указать конкретное значение по умолчанию при загрузке страницы.Я могу дать случайное значение, но я хочу, чтобы оно было фиксированным значением, поскольку мы задаем в качестве значения = "число".

Я планирую получить значение по умолчанию для ползунка из базы данных.Поэтому, пожалуйста, дайте мне знать, как использовать его только в HTML-тегах. 

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

1 Ответ

0 голосов
/ 28 мая 2018

Используйте ng-init, чтобы установить значение по умолчанию для переменной области действия disabled1.См JSBIN 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...