How to set input field value when check box is checked using Angular.js

Question

I need when i will be checked the check box the respective input field will have the required value. Let me show my code below.

<label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors"> Five
</label>
<label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors"> Ten
</label>
<input type="text" name="color" id="clr" ng-model="color" readonly />

I need here when user will check the Five the input field will get 5 and when user will check Ten,the input field value will be 10.

so then are these supposed to be radio buttons rather than checkboxes? what happens if both Five and Ten are checked? — Claies
– Claies, Commented Dec 30, 2015 at 9:28

Anik Islam Abhi · Accepted Answer · 2015-12-30 09:36:02Z

4

use ng-true-value="" in checkbox

Like this

<label class="checkbox-inline">
    <input type="checkbox" ng-model="color" ng-true-value="5" ng-false-value="0" name="favoriteColors"> Five
</label>
<label class="checkbox-inline">
    <input type="checkbox" ng-model="color" ng-true-value="10" ng-false-value="0" ng-model="color" name="favoriteColors"> Ten
</label>
<input type="text" name="color" id="clr" ng-model="color" readonly />

JSFIDDLE

edited Dec 30, 2015 at 9:36

answered Dec 30, 2015 at 9:28

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

Comments

Nitsan Baleli · Accepted Answer · 2015-12-30 09:32:16Z

1

I thought maybe you meant to use radio instead of check boxes (since the color can be either 5 OR 10). here's a working plnkr.

and the code:

<label class="checkbox-inline">
    <input type="radio" name="favoriteColors" ng-model="data.color" value="5"> Five
</label>
<label class="checkbox-inline">
    <input type="radio" name="favoriteColors" ng-model="data.color" value="10"> Ten
</label>
<input type="text" name="color" id="clr" ng-model="data.color" readonly />

js:

app.controller('MainCtrl', function($scope) {
  $scope.data = { color: '' };
});

answered Dec 30, 2015 at 9:32

Nitsan Baleli

5,4683 gold badges35 silver badges54 bronze badges

Comments

ThuyenNginh · Accepted Answer · 2015-12-30 09:35:12Z

1

<label class="checkbox-inline">
    <input type="checkbox" ng-click="color=5" name="favoriteColors"> Five
</label>
<label class="checkbox-inline">
    <input type="checkbox" ng-click="color=10" name="favoriteColors"> Ten
</label>
<input type="text" name="color" id="clr" ng-model="color" readonly />

https://jsfiddle.net/5s1bfjco/7/

answered Dec 30, 2015 at 9:35

ThuyenNginh

1064 bronze badges

1 Comment

Anik Islam Abhi Over a year ago

glad to see that you use my fiddle :P

Avijit Gupta · Accepted Answer · 2015-12-30 09:29:37Z

0

Bind your checkbox inputs to ng-model as well, and then assign the value accordingly. Something like this:

<input type="checkbox" name="favoriteColors" ng-model="isChecked.five"> Five
<input type="checkbox" name="favoriteColors" ng-model="isChecked.ten"> Ten

In your controller:

$scope.isChecked = {};
if ($scope.isChecked.five) {
  $scope.color = 5;
}
if ($scope.isChecked.ten) {
  $scope.color = 10;
}

It should automatically update your input value as you check/uncheck the checkboxes, due to two-way binding.

answered Dec 30, 2015 at 9:29

Avijit Gupta

5,7863 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to set input field value when check box is checked using Angular.js

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related