javascript - Angular - 使用两个按钮设置单个 bool 值(通过/失败)

Question

所以我有一个 bool 值，我想使用两个按钮设置:通过/失败(用于使用 Bootstrap 进行样式设置)

到目前为止，我已经找到了一种通过按下按钮来设置模型值的方法，但是编辑呢？加载模型时如何让 Angular 选择正确的按钮？

单击按钮时，我调用了一个 Controller 方法来设置模型的值，但似乎 Angular 对此有更好的解决方案。

Here是我目前拥有的 jsfiddle。

<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

所以我发现 angular-ui bootstrap buttons 就是为此而生的!

你要做的是像往常一样创建一个button，设置ng-model，然后添加一个btn-radio标签您将用于单选按钮的值!我只需要在引导我的应用程序时包含 ui.bootstrap。

Here is the JSFiddle我所做的:

<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;
}