角 - 設置單布爾有兩個按鈕（通過/失敗）

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，並設置樣式依賴於有問題的變量的狀態。