angularjs checkbox checked if model evaluates to true

Question

How do I define a checkbox in an angular form that is checked when the model evaluates to true (anything like "yes", "1", 1,...) and is unchecked when the model evaluates to false ("0", 0, undefined, ...)? I get the data from a rest service and the represantation of true and false can vary. If the user changes the value in the form it should be set to "1" (on) or "0" (off). If he changes it again it should be set to it's original value and marked as unchanged. I'd like to write markup like:

<input type="checkbox" ng-model="value1" my-custom-directive>
<input type="checkbox" ng-model="value2" my-custom-directive>

You're going to have to interpret the results from the rest service ("1", "on", etc) to a true/false value for the ng-model variables. Put a $watch on $scope.server_value1 & update $scope.value1 accordingly when the former changes. — Foo L
– Foo L, Commented Jun 18, 2014 at 8:07
Yes, thats the other way to do ist, transform the values from the rest service to boolean and back. So I do it now. I am surprised that there is no easy way to achieve this with directives. — Galdor
– Galdor, Commented Jun 20, 2014 at 8:18

Patrick Ferreira · Accepted Answer · 2014-06-20 08:28:54Z

2

Ok, I just finish the case on jsfiddle

All the stuff is do by a simple filter that evaluates the truffy values you defined ;-)

angular.module('App', [])
    .filter('isTruffy', function () {
    return function (input) {
        // Add here, how much truffy values as you want, this is not case sensitive...
        var truffies = [1, '1', true, 'true', 'yes', 'y'];

        if (typeof input == 'String')
            input = input.toLowerCase();

        return truffies.indexOf(input) > -1;
    };
});

After, just call your filter on your template

<input type="checkbox" ng-checked="b | isTruffy" />

edited Jun 20, 2014 at 8:28

answered Jun 18, 2014 at 8:39

Patrick Ferreira

2,0632 gold badges16 silver badges33 bronze badges

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

3 Comments

Galdor Over a year ago

Where is the ng-model binding in your fiddle? There are much more truffy values that you listed, e.g. each number != 0.

Patrick Ferreira Over a year ago

For the jsfiddle, I used ng-init in the template instead of an initialisation from the controller, but it's the same thing. If you know the full list of truffies or falsies values you can addapt the filter. For the default "boolean evaluator" from javascript, check again the jsfiddle, there was a typo.

Galdor Over a year ago

Hmm, look at my fiddle: jsfiddle.net/rva6U . If you alter the value in the text input everything is fine (except the 0 string, this could be solved with the filter. But when I click on the checkbox the value is not set to 1 or 0. Do you have a solution?

Galdor · Accepted Answer · 2014-06-20 12:02:11Z

0

It seems that there is no easy way to do this with a directive, so I alter my model after the http request:

value = value ? true : false;

The form is then simple:

<input type="checkbox" ng-model="value">

When the user submits the form there will be some transformation like:

if (value && ! oldvalue || ! value && oldvalue) {
  value = value ? 1 : 0;
  // send http request
} else {
  // nothing to do
}

edited Jun 20, 2014 at 12:02

answered Jun 20, 2014 at 8:42

Galdor

2,0136 gold badges27 silver badges45 bronze badges

Comments

chandu · Accepted Answer · 2014-06-18 07:57:58Z

-1

Please add the below function in controller in ng-checked.

$scope.validateColName = function (colname) {


         var url = $scope.url;         

         $http.get(url)
             .success(function (data) {
                 if(data){
                     $scope.checkvaluecol= 'true';

                 }else{
                     $scope.checkvaluecol= 'false';
                 }
                 })
             .error(function(data, status, headers) {
                 $scope.handleErrorInDialogs(status);
             });
    };

and this to your input tag which is od type checkbox.

 ng-checked="checkIndicator(checkbox1)"

edited Jun 18, 2014 at 7:57

chandu

2,2763 gold badges23 silver badges35 bronze badges

answered Jun 18, 2014 at 7:46

saipm

894 bronze badges

Collectives™ on Stack Overflow

angularjs checkbox checked if model evaluates to true

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related