如何根据选择动态地设置输入控件的最小值和最大值Angular

问题描述：

我在寻找一些通用的解决方案，根据下拉选择动态更新最小值和最大值。检查这Fiddle。如何根据选择动态地设置输入控件的最小值和最大值Angular

如果用户选择：

小时 - min和max值应为1至24
分钟 - min和max值应为60〜6000
秒 - 分钟和最大值应该是3000到10000

我是lo找一些解决方案，根据选择更新输入控件的绑定。它也应该更新验证消息。寻找一些通用和可重用的解决方案，以便可以跨应用程序重用。

这里是我的代码： HTML

<div ng-app="app"> 
<div ng-controller="TimeController as vm"> 
    <label>Desired RPO</label> 
    <div> 
     <div class="input-group"> 
      <input type="number" class="form-control" name="desiredRPO" min="minvalue" max="maxvalue" step="1" /> 
      <div class="input-group-btn" style="display:inline-block;"> 
       <select class="form-control"> 
        <option>HOURS</option> 
        <option>MINUTES</option> 
        <option>SECONDS</option> 
       </select> 
      </div> 
     </div> 
     <span>Please enter value between {{minvalue}} and {{maxvalue}}</span> 
    </div> 
</div>

var app = angular.module('app', []); 
app.controller('TimeController', function($scope) { 
    var vm = this; 
});

答

请参阅回答这里PLUNKER

在HTML

<div ng-app="app"> 
    <div ng-controller="TimeController as vm"> 
    <form name="vm.timeForm" novalidate> 
     <div class="form-group"> 
     <label>Please select</label> 
     <select class="form-control" ng-model="vm.selectedOption" ng-change="vm.updateMinMax()"> 
      <option value="hours">HOURS</option> 
      <option value="minutes">MINUTES</option> 
      <option value="seconds">SECONDS</option> 
     </select> 
     </div> 
     <div class="form-group" ng-class="{ 'has-error' : vm.timeForm.desiredRPO.$invalid && !vm.timeForm.desiredRPO.$pristine }"> 
     <label>Desired RPO</label> 
     <input type="number" name="desiredRPO" class="form-control" ng-model="vm.desiredRPO" ng-min="vm.minValue" ng-max="vm.maxValue"> 
     <p ng-show="vm.timeForm.desiredRPO.$invalid" class="help-block">Please enter value between {{vm.minValue}} and {{vm.maxValue}}</p> 
     </div> 
    </form> 
    </div>

在你的控制器

var app = angular.module('app', []); 
app.controller('TimeController', function($scope) { 
    var vm = this; 

    vm.timeForm = {}; 

    vm.updateMinMax = function() { 
     if(vm.selectedOption === 'hours') { 
     vm.minValue = 1; 
     vm.maxValue = 24; 
     } else if(vm.selectedOption === 'minutes') { 
     vm.minValue = 60; 
     vm.maxValue = 6000; 
     } else { 
     vm.minValue = 3000; 
     vm.maxValue = 10000; 
     } 
    } 
});

似乎并不奏效，U可以更新小提琴？ – ankitd

好的，我会更新小提琴。 – jaguwalapratik

请检查plunkr ... https://plnkr.co/edit/oQoahf2XsPsWDsPw5D4g?p=preview ..设计明智的，你可以相应地改变它。 – jaguwalapratik

答

有动态值

<input ng-min="vm.diapason.min" ng-max="vm.diapason.max"/> 

<select class="form-control" ng-model="vm.diapason" 
      ng-options="option.label for option in vm.restrictions"> 
</select>

和控制器纳克分钟NG-MAX指令与

vm.restrictions = [ 
    { 
    label: 'HOURS', 
    min: 1, 
    max: 24 
    }, 
    { 
    label: 'MINUTES', 
    min: 60, 
    max: 6000 
    }, 
    { 
    label: 'SECONDS', 
    min: 3000, 
    max: 10000 
    } 
]

我们如何改变他们基于选择..你可以更新小提琴？ – ankitd

我知道这种方法与其他方法不同，但不知怎的，我无法使用这种方法使其工作。如果有可能你可以更新这与你的appraoch https://plnkr.co/edit/oQoahf2XsPsWDsPw5D4g?p=preview – ankitd

我错误的ng值的litte。你可以使用ng-options来与我接触。将编辑帖子。 –

答

我刚刚创建工作普朗克，希望它有帮助。

https://plnkr.co/edit/rCQzEhojZP0iHvoI1KlO?p=preview

的index.html

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="script.js"></script> 

    </head> 

    <body ng-app="app"> 


    <div ng-controller="TimeController as vm"> 
     <label>Desired RPO</label> 
     <div> 
     <div ng-init="item=timings[0]" class="input-group"> 

      <input type="number" class="form-control" name="desiredRPO" min="{{item.min}}" max="{{item.max}}" step="1" /> 

      <div class="input-group-btn" style="display:inline-block;"> 

      <select 
       ng-model="item" 
       ng-options="item.type for item in timings"></select> 

      </div> 
     </div> 
     <span>Please enter value between {{item.min}} and {{item.max}}</span> 

     </div> 
     <h3>Requirement: </h3> 
     <h4> 
     If user select : 
     Hours - min and max value should be 1 to 24 <br> 
     Minutes - min and max value should be 60 to 6000 <br> 
     Seconds - min and max value should be 3000 to 10000 <br> 
     </h4> 
     <h6> 
     I am looking for some solution which will update the binding at input control based on selection. Also it should update the validation message. 
     Looking for some generic and reusable solution so It can be reused across application. 
     </h6> 
    </div> 

    </body> 

</html>

的script.js

var app = angular.module('app', []); 
app.controller('TimeController', function($scope) { 

var vm = this; 
$scope.timings = [{type: 'HOURS', min: 1, max: 24}, 
{type: 'MINUTES', min: 60, max: 6000}, 
{type: 'SECONDS', min: 3000, max: 10000}]; 

});

答

这是你所需答案，用小提琴

var app = angular.module('app', []); 
 
app.controller('TimeController', function($scope) { 
 

 
    var vm = $scope; 
 
    
 
    vm.update_values = function() { 
 
     if(vm.selected === 'hours') { 
 
     vm.min = "1"; 
 
     vm.max = "24"; 
 
     } else if(vm.selected === 'minutes') { 
 
     vm.min = "60"; 
 
     vm.max = "6000"; 
 
     } else { 
 
     vm.min = "3000"; 
 
     vm.max = "10000"; 
 
    } 
 
    } 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<style href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></style> 
 

 
<div ng-app="app"> 
 

 
    <div ng-controller="TimeController"> 
 
    <label>Desired RPO</label> 
 
    <div> 
 
     <div class="input-group"> 
 

 
     <input type="number" class="form-control" name="desiredRPO" min="{{min}}" max="{{max}}" step="1" ng-model="time"/> 
 
     
 

 
     <div class="input-group-btn" style="display:inline-block;"> 
 
      <select class="form-control" ng-change="update_values()" ng-model="selected"> 
 
      <option value="">Please Select</option> 
 
      <option value="hours">HOURS</option> 
 
      <option value="minutes">MINUTES</option> 
 
      <option value="seconds">SECONDS</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
     <span>Please enter value between {{min}} and {{max}}</span> 
 

 
    </div> 
 
    <h3>Requirement: </h3> 
 
    <h4> 
 
    If user select : 
 
    Hours - min and max value should be 1 to 24 <br> 
 
    Minutes - min and max value should be 60 to 6000 <br> 
 
    Seconds - min and max value should be 3000 to 10000 <br> 
 
    </h4> 
 
    <h6> 
 
    I am looking for some solution which will update the binding at input control based on selection. Also it should update the validation message. 
 
    Looking for some generic and reusable solution so It can be reused across application. 
 
    </h6> 
 
    </div>

请运行该代码，并检查

Here is the fiddle

你好@ankitdadhich，你试过这个吗？ – Sravan

刚才看到，但Pratik的答案看起来更相关。谢谢回答。 – ankitd

如何根据选择动态地设置输入控件的最小值和最大值Angular

相关推荐