绑定不适用于所需的输入字段

Question

我使用Bootstrap创建了AngularJS HTML：

<div class="col-sm-6" ng-app ng-controller="MyController">   
    <br/><br/>
    <form name="myForm">
        <div class="input-group">
            <input type="text" name="input" class="form-control" ng-model="input" maxlength="{{inputMaxLength}}" ng-minlength="{{inputMaxLength}}" ng-maxlength="{{inputMaxLength}}" placeholder="Type input.." aria-describedby="basic-addon2" required />
            <span class="input-group-addon" id="basic-addon2" ng-bind="{{inputMaxLength-input.length}}"></span>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default btn-primary" ng-disabled="myForm.$invalid">Submit</button>
        </div>
    </form>
</div>

和这个控制器：

function MyController($scope) {
    $scope.input = "";
    $scope.inputMaxLength = 18;
}

字段中的Bootstrap插件应始终计算剩余字符数。只要表单无效，就应该禁用“提交”按钮。

按钮按预期工作，但添加中的“倒计时”始终为18。

为什么？

请参阅此JSFiddle。

Answer 1

你有一个ng-min-length的拼写错误，你应该有：

ng-minlength="{{inputMinLength}}"

而不是

ng-minlength="{{inputMaxLength}}"

哦，你应该在ng-bind上丢失花括号，你可以使用其中一种，但不能同时使用两种 所以：

<span class="input-group-addon" id="basic-addon2" ng-bind="inputMaxLength-input.length"></span>

或

<span class="input-group-addon" id="basic-addon2">{{inputMaxLength-input.length}}</span>

（同样适用于ng-minlength="{{inputMaxLength}}" ng-maxlength="{{inputMaxLength}}"，此处无需插值，请改用ng-minlength="inputMaxLength" ng-maxlength="inputMaxLength"）

请注意，虽然输入不符合要求，即。大于minLength且短于maxLength输入将没有值。 在这种情况下，您可以使用myForm.input.$viewValue

获取值

我已经更新了你http://jsfiddle.net/29m5tdsc/9/

Answer 2

这不起作用：你的ng-validation（ng-minlength）会将$ scope.input设置为null。所以你的计数器不会工作。

此外，你写道：

ng-bind="{{inputMaxLength - input.length}}"

当angular将起作用时，他将用值替换变量。你应该写道：

ng-bind="(inputMaxLength - input.length)"

JS Fiddle