簡體   English   中英

AngularJS如何綁定數據

[英]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中看到:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM