Question

我使用 Bootstrap HTML 标记：

<div class="col-sm-6" ng-app ng-controller="MyController">   
    <br/><br/>
    <div class="input-group">
        <input type="text" name="input" class="form-control" ng-model="input" ng-maxlength="18" ng-minlength="18" placeholder="Type input.." aria-describedby="basic-addon2">
        <span class="input-group-addon" id="basic-addon2" ng-bind="inputMaxLength"></span>
    </div>
</div>

和 AngularJS 控制器：

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

实施＆＃34; charaters left＆＃34;的推荐解决方案是什么？ bootstrap插件中的功能？此外，如何更改输入字段，以便我不能输入超过18个字符？

请参阅此演示示例： http://jsfiddle.net/dennismadsen/7ugzn76s/2/

更新1

我根据您的回答更新了JSFiddle。但倒计时不起作用： http://jsfiddle.net/dennismadsen/7ugzn76s/3/

Answer 1

有很多方法可以达到你的结果。我已经看到你已经更新了小提琴，但你仍然遇到“剩余字符”数字的问题。你必须绑定其余字符微积分的结果。

<div class="col-sm-6" ng-app ng-controller="MyController">   
<br/><br/>
<div class="input-group">
    <input type="text" name="input" class="form-control" ng-model="myInput" maxlength="18" minlength="18" placeholder="Type input.." aria-describedby="basic-addon2">
    <span class="input-group-addon" id="basic-addon2">{{inputMaxLength - myInput.length}}</span>
</div>

这是一个更新的小提琴：http://jsfiddle.net/s5kvjdov/1/

Answer 2

从您的更新1分发：http://jsfiddle.net/5ka355sa/

两个变化 1. ng-bind总是一个表达，不要在那里使用花括号。 2.您使用了ng-minlength = "18"，这意味着'foo'之类的东西因为太短而无效。无效的值不会添加到模型中。

<input type="text" name="input" class="form-control" ng-model="input" maxlength="{{inputMaxLength}}" ng-maxlength="{{inputMaxLength}}" placeholder="Type input.." aria-describedby="basic-addon2">
<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}} characters left.</span>

Answer 3

我将值更改为ng-bind并放在span：

之间

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

现在它正在按预期执行，同样在ng-maxlenght上只使用var名称而不是小胡子{{}}

你可以在下一个jsfiddle中看到：

http://jsfiddle.net/yuzdL4c3/1/

AngularJS如何绑定数据

3 个答案: