Javascript 角度-使用两个按钮设置单个布尔值（通过/失败）

所以我有一个布尔值，我想使用两个按钮来设置：Pass/Fail（用于使用bootstrap进行样式设置）

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

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

这与我目前所掌握的情况不符

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

通过/不通过
通过
失败
功能控制器（$scope）{
var densityTest={}；
densityTest.ReportPassed=真；
$scope.densityTest=密度测试；
$scope.testPassed=函数（已传递）{
$scope.densityTest.ReportPassed=通过；
};
}

据我所知，您希望根据选中的按钮设置按钮元素的样式

您可能会对Angular strap感兴趣，这是一个非常棒的用于引导的Angular模块，它也具有这方面的功能

---

如果您想自己做，您可以使用或，并根据相关变量的状态设置样式。

因此我发现

角度ui引导按钮

正是为此而设计的

您要做的是像往常一样创建一个

按钮

，设置

ng型号

，然后添加一个

btn单选

标签，标签上的值将用于单选按钮！在引导应用程序时，我只需要包含ui.bootstrap

以我所做的：

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

通过/不通过
通过
失败
angular.module（'myApp'，['ui.bootstrap']）；
功能控制器（$scope）{
var密度试验={}；
densityTest.ReportPassed=真；
$scope.densityTest=密度测试；
}

谢谢你的建议！这也同样有效！经过进一步的研究，我已经找到了AngularUI引导+1给你，巴德！谢谢你的帮助！