18

I need to show Boolean value to yes/no using directive. My directive is given below

 directives.directive('niBooltoYesno',
        function () {
            return {
                restrict: 'EA',
                require: 'ngModel',
                link: function (scope, element, attrs, ngModel) {
                    function formatter(value) {
                        if (value) {
                            return value === true ? 'Yes' : 'No';
                        } else {
                            return '';
                        }
                    }
                    ngModel.$formatters.push(formatter);

                }
            };
        });

<ni-boolto-yesno data-ng-model="set_unit.isActive" ></ni-boolto-yesno>

But it does not work. Please help me in this point.

2
  • You should describe exactly how it doesn't work or provide a jsfiddle/codepen.
    – hon2a
    Nov 23, 2014 at 10:15
  • why not something like just {{user.booleanValue?'yes':'no'}} Jan 31, 2017 at 22:48

3 Answers 3

61

You're not using the right tool for the job. This should be a filter:

{{ someBooleanValue | yesNo }}

The filter would be as simple as

module.filter('yesNo', function() {
    return function(input) {
        return input ? 'yes' : 'no';
    }
});

If you still choose to use a directive, you don't need ngModel and formatters, which is used on form fields that must read and write to a model. All you need is a template:

module.directive('yesNo', function() {
    return {
        template: '<span>{{ yesNo ? "yes" : "no" }}</span>',
        scope: {
            yesNo: '='
        }
    };
});

and you woud use it as

<span yes-no="someBoolean"></span>
1
  • Filter is perfect for my case.
    – Amin Uddin
    Nov 24, 2014 at 6:54
17

I define textual values for 0 and 1 with...

{{object.PROPERTY?'Yes':'No'}}

...when presented with something like this:

{
  "PROPERTY": 0
}

The result would then be 'No'.

1
  • 3
    This is really the better answer. It's simple and clean. The answer by JB Nizet works perfectly fine but is overkill in this scenario. It's suited to more complex occasions.
    – Rob
    Nov 17, 2016 at 22:56
2

The problem is in if (value). This causes the return value === true ? ... line to be processed only when the value is actually truthy (i.e. never for false). You just need to construct the conditions properly:

function formatter (value) {
    return (value === true) ? 'Yes' : ((value === false) ? 'No' : '');
}

A version with better readability:

function formatter (value) {
    if (value === true) {
        return 'Yes';
    } else if (value === false) {
        return 'No';
    } else {
        return '';
    }
}

Edit: I haven't looked at your HTML. As another answer points out, using ng-model for this is a bad idea, creating a filter should suit you just fine.

2
  • the nesting on your if statements is a little off (formatted version). You are not adding an else-if block. The else block of the ternary operator would contain a second if else block
    – Kieran
    May 19, 2017 at 6:50
  • @Kieran if A { X } else { if B { Y } else { Z } } is equivalent to if A { X } else if B { Y } else { Z } and flattened code is always easier to read.
    – hon2a
    May 19, 2017 at 7:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.