angularjs - 条件 ngPattern

Question

按照这段代码：

    <label class="checkbox-label">
        <input name="radio1" type="radio"
               ng-model="myModel.radio" 
               required ng-required="true" 
               value="1">
    </label>
    <label class="checkbox-label">
        <input name="radio1" type="radio"
               ng-model="myModel.radio" 
               required ng-required="true"
               value="2">
    </label>

    <input type="number" name="result" class="form-control input-sm" ng-model="myModel.result"
        required ng-required="true" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.1" min="0" max="100">

我需要根据选择将&ng-pattern设置step为接受一位小数 (0.1) 或两位小数 (0.01)radio1

任何人都知道如何解决这个问题？

更新 我已经创建了一个指令来执行此操作，但更改模式后不会触发验证（Angular 1.2）

app.directive('stepChange', function () {
    return {
        link: function link(scope, element, attr) {
            element.bind('change', function () {
                var el = angular.element(attr['target']);
                el.attr('step', attr['step']);
                el.attr('pattern', attr['pattern']);
                el.val(attr['val']);
                el.trigger();
            });
        }
    }
});

Answer 1

step您应该为和pattern动态工作编写自定义实现。

以供参考

如何自定义数字输入字段的步长？

HTML5 输入类型=数字更改步骤行为

Answer 2

这样做的关键是：

1. 将手表应用于收音机中使用的模型。

2. 更改上述手表中的步长值并使用范围变量将其分配回

   $scope.$watch('myModel.radio',function(a,b){
        debugger
        if(a ==1){
           $scope.step = "0.1";
        }else if(a==2){
           $scope.step = "0.01";
        }
      });
   

请在 plunkr 中自己应用步骤逻辑/值。

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

您还可以以相同的方式使 ng-pattern 动态化（如 step）

<input type="number" name="result" class="form-control input-sm" 
    ng-model="myModel.result" required ng-required="true" 
    ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step={{step}} min="0" max="100">