AngularJS how to bind data

Question

I've this HTML markup using Bootstrap:

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

and this AngularJS controller:

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

What is the recommended solution for implementing the "charaters left" feature in the bootstrap addon? Further, how can I change the input field so that I cannot type in more then 18 charaters?

See this demo example: http://jsfiddle.net/dennismadsen/7ugzn76s/2/

UPDATE 1

I've updated the JSFiddle, based on your answers. But the countdown does not work: http://jsfiddle.net/dennismadsen/7ugzn76s/3/

how can I change the input field so that I cannot type in more then 18 charaters. This is simple: <input maxlength="18">. — dfsq
– dfsq, Commented Feb 27, 2015 at 15:14
To show "characters left" you could simply do: {{inputMaxLength - input.length}}. — New Dev
– New Dev, Commented Feb 27, 2015 at 15:20

tommaso capelli · Accepted Answer · 2015-02-27 15:51:16Z

2

There are a lot of ways to achieve your result. I've seen that you've updated the fiddle but you're still having problems with the "remaining chars" numbers. you have to bind a the result of the remaining chars calculus.

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

Here's an updated fiddle: http://jsfiddle.net/s5kvjdov/1/

answered Feb 27, 2015 at 15:51

tommaso capelli

9402 gold badges8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dylan Watt · Accepted Answer · 2015-02-27 16:10:13Z

1

As forked from your update 1: http://jsfiddle.net/5ka355sa/

Two changes 1. ng-bind is always an expression, don't use curly braces there. 2. You used ng-minlength = "18" which mean things like 'foo' were invalid as they were too short. Invalid values aren't added to the model.

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

Alternatively for the label you can do

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

edited Feb 27, 2015 at 16:10

answered Feb 27, 2015 at 16:04

Dylan Watt

3,38715 silver badges17 bronze badges

Comments

alphamikevictor · Accepted Answer · 2015-02-27 16:20:59Z

1

I changed the value out of ng-bind and put between span:

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

And now it is performing as expected, also on the ng-maxlenght use only the var name and not the moustache {{}}

You can see in the next jsfiddle:

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

answered Feb 27, 2015 at 16:20

alphamikevictor

6478 silver badges20 bronze badges

Collectives™ on Stack Overflow

AngularJS how to bind data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related