AngularJS如何绑定数据

AngularJS how to bind data

本文关键字：绑定 数据 何绑定 AngularJS      更新时间：2023-09-26

我有这个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;
}

在引导程序插件中实现"charaters left"功能的建议解决方案是什么？此外，我如何更改输入字段，使我不能输入超过18个字符？

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

更新1

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

有很多方法可以实现您的结果。我看到你已经更新了fiddle，但你仍然对"剩余字符"数字有问题。您必须绑定一个剩余chars演算的结果。

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

从更新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>

我更改了ng绑定的值，并将其放在span:之间

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

现在它的性能正如预期的那样，在ng maxlenght上也只使用var名称，而不使用胡子｛｛｝｝

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

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

相关文章：