Angular - Set single boolean value with two buttons (Pass/Fail)

Question

So I have a boolean value that I want to set using two buttons: Pass/Fail (for styling purposes using bootstrap)

So far I have found a way to set the value of the model with a button push, but what about editing? How do I have angular select the correct button when I load the model?

When the button is clicked I am calling a controller method that sets the value of the model, but it seems that Angular would have a better soultion for this.

Here is the jsfiddle with what I have so far.

<div ng-app ng-controller="Controller" class="container">
    <label for="" style="clear: both">Pass / Fail</label>
    <div id="passFail" class="btn-group">
        <button type="button" class="btn btn-default" ng-click="testPassed(true)" style="check">Pass</button>
        <button type="button" class="btn btn-default" ng-click="testPassed(false)">Fail</button>
    </div>
    <div>
        <input type="text" ng-model="densityTest.ReportPassed" disabled>
    </div>
</div>

function Controller($scope) {
    var densityTest = {};
    densityTest.ReportPassed = true;
    $scope.densityTest = densityTest;

    $scope.testPassed = function (passed) {
        $scope.densityTest.ReportPassed = passed;
    };
}

Answer 1

So I found that angular-ui bootstrap buttons are made just for this!

What you do is create a button like usual, set the ng-model, and then add a btn-radio tag with the value you would use for radio buttons! I just had to include ui.bootstrap when boot strapping my application.

Here is the JSFiddle with what I have done:

<div ng-controller="Controller" class="container">
    <label for="" style="clear: both">Pass / Fail</label>
    <div class="btn-group">
        <button type="button" class="btn btn-default" ng-model="densityTest.ReportPassed" btn-radio="true">Pass</button>
        <button type="button" class="btn btn-default" ng-model="densityTest.ReportPassed" btn-radio="false">Fail</button>
    </div>
    <div>
        <input type="text" ng-model="densityTest.ReportPassed" disabled>
   </div>
</div>

angular.module('myApp', ['ui.bootstrap']);
function Controller($scope) {
    var densityTest = {};
    densityTest.ReportPassed = true;
    $scope.densityTest = densityTest;
}

Answer 2

As far as I understand you are looking to set the style of the button element based on what button is checked?

You might be interested in Angular-strap, a great Angular module for Bootstrap, which also has features for this.

http://mgcrea.github.io/angular-strap/##buttons

If you want to do it yourself, you can use either ng-class or ng-style, and set styles dependant on the state of the variable in question.