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

标签 javascript angularjs ionic-framework

请给我正确的代码...

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

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

Controller 代码如下:

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

最佳答案

您可以使用 ngModel 来控制值并使用 income 值定义 minmax,如下所示下面的例子。

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

关于javascript - 根据angularJS中的另一个输入[type=text]值设置输入[type=range]最大值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40238203/

相关文章:

javascript - 在一天中的特定时间调用 javascript 函数

javascript - 从 javascript 字符串中删除 HTML 标签

javascript - 学习 JavaScript,如何仅在以下语句为真时打印出这一行

angularjs - 使用 Angular-cli 创建新项目时出错

javascript - Kendo UI 网格和 ng 风格

angularjs - 根据范围变量显示 ion-nav-buttons 位置

javascript - 为什么 angularjs 路由器在这里不起作用?

javascript - 打开 firebug 控制台的 Firefox 使用 sammy.js 和 knockout.js 引发过多递归

javascript - 在 ng-bind-html 插入的 html 中使用 ng-attr

javascript - 如何在 Cordova/ionic 中获取 deviceready 事件?