javascript - AngularJS如何绑定(bind)数据

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 Controller :

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

在 Bootstrap 插件中实现“剩余字符”功能的推荐解决方案是什么？此外，如何更改输入字段以使我无法输入超过 18 个字符？

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

更新1

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

Answer 1

有很多方法可以实现您的结果。我发现您已经更新了 fiddle ，但“剩余字符”数字仍然存在问题。您必须绑定(bind)剩余字符演算的结果。

<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>

这是更新的 fiddle :http://jsfiddle.net/s5kvjdov/1/