Angular.js. Ng-model of checkbox

Question

Here's my code:

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

In this case variable will be true or false according the status of checkbox. I need to set not true/false but "+"/"-" instead. What is the simplest way to do this? Thanks.

Answer 1

According to the docs, you should use ng-true-value and/or ng-false-value to override true and false values:

<input type="checkbox" ng-model="variable" ng-true-value="+" ng-false-value="-">

Answer 2

Use ng-click to do that.

<input type="checkbox" ng-model="variable" ng-click="check()">

In the controller :

$scope.check = function() {
    $scope.selected = $scope.variable === true ? '+' : '-';
};

Live Plunker.

Answer 3

Just setup a watch on your checkbox model.

HTML:

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

JavaScript:

// set initial value
$scope.isChecked = $scope.variable === '+';

// watch for changes to the checkbox model
$scope.$watch('isChecked', function(newVal) {
    $scope.variable = newVal ? '+' : '-';
};