AngularJS - Give checkbox an integer?

Question

I was able to see true or false and return strings in checkboxes with ng-true-value and ng-false-value, but in additional, I want to give the checkbox an integer and if it's checked, it returns an integer.

Which should be similar to when I get a value from a selectbox: http://jsfiddle.net/PuDRm/

But I can't seem to get the same idea in a checkbox: http://jsfiddle.net/PuDRm/1/

<input type="checkbox" ng-model="testc" ng-true-value="Yes" ng-false-value="No" ng-change="processtest()" /> Yes

I'm a total newbie and trying to understand AngularJS.

In your JSFiddle, you did not bind the select to an integer, but to the object itself. You should do ng-options="t.value as t.name for t in tests" if you want test to be only the integer and not test.value. — jpmorin
– jpmorin, Commented Oct 15, 2013 at 0:31
The checkbox works with strings by default, you would need a directive to parse the model value back and forth or you could use the ng-checked directive and pass a condition. — jpmorin
– jpmorin, Commented Oct 15, 2013 at 0:39
did not know about ng-true-value/ng-false-value, very useful — chiliNUT
– chiliNUT, Commented Aug 30, 2016 at 21:53

Andyrooger · Accepted Answer · 2013-10-15 00:50:11Z

It sounds like you are trying to bind to two separate values with the checkbox.

In the select the view is the name you gave e.g. 'test1', and the model is the number, e.g. '1'. For the checkbox, the view is a check or a blank square and the model is Yes/No (or whatever you want to put in the ng-true-value and ng-false-value). There's no room to have it produce a number too.

It would be simpler to let the checkbox model be the default (boolean) type by omitting the ng-true-value and ng-false-value attributes. You can then display the number and text based on this like in this updated fiddle: http://jsfiddle.net/D5DGf/1/

The {{ ... }} bindings take care of updating when the function values change, so you don't need to use ng-change either.

What was wrong with the original checkbox fiddle?

In the processtest function you are taking the model (Yes/No) and changing it to always be either 8 or 1. The checkbox (in fact, ngModel) doesn't understand this as it expects to always see Yes/No. As it doesn't know what to do, it falls back to being unchecked.

This is why the checkbox in the original fiddle is uncheckable.

jpmorin · Accepted Answer · 2013-10-15 00:47:47Z

9

If you still want to set use a number for your model and checbox value, you could do it with a custom directive to parse the string back to integer.

Demo: http://jsfiddle.net/qw5zS/

html

<input type="checkbox" ng-model="test" parse-int ng-true-value="1" ng-false-value="0" />

js

app.directive('parseInt', [function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, controller) {
            controller.$formatters.push(function (modelValue) {
                console.log('model', modelValue, typeof modelValue);
                return '' + modelValue;
            });

            controller.$parsers.push(function (viewValue) {
                console.log('view', viewValue, typeof viewValue);
                return parseInt(viewValue,10);
            });
        }
    }
} ])

But this might not be a good practice using checkbox, you should stay with the default behavior and use a boolean, then format the view like you want, but keep your data clean.

answered Oct 15, 2013 at 0:47

jpmorin

6,0182 gold badges31 silver badges39 bronze badges

2 Comments

Peter V. Mørch Over a year ago

This was exactly what I needed. Unfortunately, this works in version 1.2.0-rc.2 (in the fiddle), but not in 1.2.0-rc.3 or 1.2.4 which we're using. :-(

Peter V. Mørch Over a year ago

I've created a fork of the fiddle. It now follows the documentation.

Mihai Pop · Accepted Answer · 2014-09-10 12:30:29Z

6

If you change the column in database from integer to char, it works with

<input type="checkbox" ng-model="testc" ng-true-value="1" ng-false-value="0" ng-change="processtest()" /> Yes

answered Sep 10, 2014 at 12:30

Mihai Pop

751 silver badge5 bronze badges

Comments

OlivierLarue · Accepted Answer · 2018-08-31 15:20:54Z

2

Here is the solution which worked best in my trials :

<input type="checkbox"
   ng-true-value="{{ 1 | json }}" ng-false-value="{{ 0 | json }}"
   ng-model="myVariable">

answered Aug 31, 2018 at 15:20

OlivierLarue

2,44029 silver badges32 bronze badges

Comments

Matthias Van Parijs · Accepted Answer · 2014-10-31 10:49:50Z

Another approach without the needs of ng-model, ng-true-value and ng-false-value. Let's keep those the way they are.

js

angular.module('whateverModule')
    .directive('toggleInt', function () {
        function link ($scope, $element, attr) {
            $element.on('click', function () {
                $scope.$apply(function() {
                    $scope.toggleModel = +!$scope.toggleModel;
                });
            });

            $scope.$watch('toggleModel', function (value) {
                $element.prop('checked', !!value);
            });
        }

        return {
            restrict: 'A',
            scope: {
                toggleModel: '='
            },
            link: link
        };
    });

html

<input type="checkbox" toggle-int toggle-model="intModel">
<span>Value: {{intModel}}</span>

Rick · Accepted Answer · 2015-04-13 04:44:00Z

0

What I ended up doing was just using an if statement on the controller.

Example:

$scope.status = ($scope.status === 1 ? true : false);

edited Apr 13, 2015 at 4:44

answered Apr 12, 2015 at 21:44

Rick

13.6k3 gold badges46 silver badges42 bronze badges

Collectives™ on Stack Overflow

AngularJS - Give checkbox an integer?

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related