[英]AngularJS how to bind data
我有使用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;
}
在Bootstrap附加組件中實現“左字符”功能的推薦解決方案是什么? 此外,如何更改輸入字段,以使我不能輸入超過18個字符?
請參閱此演示示例: http : //jsfiddle.net/dennismadsen/7ugzn76s/2/
更新1
我已經根據您的回答更新了JSFiddle。 但是倒數計時不起作用: http : //jsfiddle.net/dennismadsen/7ugzn76s/3/
有很多方法可以實現您的結果。 我已經看到您已經更新了小提琴,但是“剩余字符”數字仍然有問題。 您必須綁定剩余字符演算的結果。
<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-bind的值並將其放在span之間:
<span class="input-group-addon" id="basic-addon2" >{{inputMaxLength-input.length}}</span>
現在,它的表現符合預期,而且在ng-maxlenght上也僅使用var名稱,而不使用胡須{{}}
您可以在下一個jsfiddle中看到:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.