角 - 设置单布尔有两个按钮（通过/失败）

Question

所以我有一个布尔值，值，我想用两个按钮来设置：通过/失败（使用自举造型的目的）

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

单击按钮时，我调用一个控制器方法来设置模型的值，但似乎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; 
} 

Answer 2

据我了解，你正在寻找设置基于按钮被检查的按钮元素的风格？

您可能会感兴趣Angular-strap，一个伟大的用于Bootstrap的Angular模块，它也具有此功能。

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

如果你想自己做，你可以使用ng-class或ng-style，并设置样式依赖于有问题的变量的状态。