-2

假设我有一些 html 如下：

<html>
<head> angular etc. </head>
<body ng-app>
<div ng-controller="MyCtrl"> 
      <input ng-model="weight" type="number" min="{{minWeight}}" max="{{maxWeight}}">
      <p>{{weight}}</p>
</div>
</body>
</html>

和以下控制器：

function MyCtrl($scope){
    $scope.weight = 200;
    $scope.minWeight = 100.0;
    $scope.maxWeight = 300.0;


}

“min”和“max”将向用户显示他们的输入是错误的，如果我将它们硬编码为 100 和 300，它将确保该值根本不会绑定到模型（为什么不是行为相同？？）。如果值满足输入要求，我想做的只是实际更改“权重”。有什么想法吗？

4

1 回答 1

1

我不完全明白你想做什么。

HTML：

<html>
<head> angular etc. </head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl"> 
      <input ng-model="weight" type="number" min="{{minWeight}}" max="{{maxWeight}}">
      <p>{{weight}}</p>
</div>
</body>
</html>

角度：[编辑]

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

app.controller('MyCtrl', ['$scope', function MyCtrl($scope){
    $scope.weight = 200;
    $scope.minWeight = 100.0;
    $scope.maxWeight = 300.0;

    $scope.$watch('weight', function (newValue, oldValue) {
        if(typeof newValue === 'number') {
            if(newValue > $scope.maxWeight || newValue < $scope.minWeight) {
                $scope.weight = oldValue;
            }
        }
    });
}]);

但这是我在 jsFiddle 中制作的一个示例。我希望这是您正在寻找的解决方案。

[编辑]

http://jsfiddle.net/migontech/jfDd2/1/

[编辑 2]

我制定了一个指令，延迟验证您的输入字段。如果它不正确，则将其设置回最后的正确值。这是完全基本的。您可以将其扩展为是否小于允许使用最小值，如果大于允许使用最大值，则完全取决于您。您可以根据需要更改指令。

http://jsfiddle.net/migontech/jfDd2/2/

如果您有任何问题，请告诉我。

于 2013-03-26T21:05:31.997 回答