Question

我有以下html：

<tbody>
  <tr ng-repeat="item in itens">
    <td width="75%">
      {{ item.name }}
    </td>
    <td width="25%">
      <input type="text" 
      class="form-control " 
      ng-model="item.value"
      ui-money-mask="2"
      ng-test'>
      <span style="font-size: 10px;">From {{ item.val_min | currency:"R$ ":2 }} To {{ item.val_max | currency:"R$ ":2 }}</span>                  
    </td>
  </tr>
</tbody>

我需要的是一个验证输入的指令;如果用户键入item.val_min和item.val_max范围之外的值，则输入显示无效消息。

如何在我的指令中获取item.val_min和item.val_max值，以及如何在用户输入时将输入设置为无效？

Answer 1

在这种情况下，您实际上并不需要指令。以下是我将如何解决它。

JS代码

var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
        $scope.items = [{
            "name": "abc",
            "value": 12,
            "val_min": 10,
            "val_max" : 99
        }, {
            "name": "xyz",
            "value": 121,
            "val_min": 10,
            "val_max" : 99
        }, {
            "name": "pqr",
            "value": 9,
            "val_min": 10,
            "val_max" : 99
        }]
        $scope.isShowErrorMessage = function(modelVal, minVal, maxVal){
            return modelVal < minVal || modelVal > maxVal;
        }
    });

HTML code：

<body >
<table ng-controller="MainCtrl" >
    <tbody>
    <tr ng-repeat="item in items track by $index">
        <td width="75%">
            {{ item.name }}
        </td>
        <td width="25%">
            <input type="text" class="form-control" ng-model="item.value" name="input" min-max-val mn-val="12" mx-val="23" data-model="{{item.value}}" />
            <span style="font-size: 10px;">From {{ item.val_min | currency:"R$ ":2 }} To {{ item.val_max | currency:"R$ ":2 }}</span>
            <span ng-show="item.value < item.val_min || item.value > item.val_max">The entered value {{item.value}} is not within the range of {{item.val_min}} and {{item.val_max}}</span>
        </td>
    </tr>
    </tbody>
</table>

如果这不是你想要的，请告诉我。

指令Angular JS输入验证

1 个答案: