在angularJS中根据另一个输入[type=text]值设置输入[type=range]最大值

Set input [type=range] max value based on another input[type=text] value in angularJS

本文关键字：type 输入 设置 range 最大值 angularJS text 另一个      更新时间：2023-09-26

请给我正确的代码。

第一个输入值等于输入[type=range]值

<input type="text" min="0" max="{{income.value}}" value="{{income.min}}" ng-model="income.value">
<input type="range" min="0" max="" value="{{income.min}}" ng-model="income.value">

下面是控制器代码:

$scope.income = {
    min: 0,
    max: '',
    value:0
}

您可以使用ngModel来控制值，并使用income值定义min和max，如下面的示例所示。

<input type="range" ng-model="income.value" max="{{ income.max }}" min="{{ income.min }}">
<input type="text" ng-model="income.max">
<input type="text" ng-model="income.min">
下面的代码片段使用income值实现了这个解决方案。 

angular.module('app', [])
  .controller('myController', function ($scope) {
    $scope.income = { min: 0, max: 100, value:0 }
  });
angular.element(document).ready(function () {
  angular.bootstrap(document, ['app']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myController">
  
  <input type="range" 
         ng-model="income.value"
         max="{{ income.max }}"
         min="{{ income.min }}">
  {{ income.value }}<br>  
  max <input type="text" ng-model="income.max"><br>  
  min <input type="text" ng-model="income.min"><br>  
  <pre>{{ income | json }}</pre>
</div>

相关文章：