Проверьте переключатель на нажатие кнопки

Question

Я работаю над кнопкой, внутри которой есть переключатель, и то, что я пытаюсь сделать, - когда я нажимаю кнопку, включается переключатель внутри, чтобы я мог получить выбранное значение.Также мне нравится это делать по угловому пути.

надеюсь, вы мне поможете, спасибо.

.role-tab-radio{
  width: 30%;
  margin: auto;
  margin-top: 20px;
}
.role-tab-radio .btn{
    border: 1px solid #FF5959;
    color: #FF5959;
    background-color: #FFF;
    transition: .3s ease-in-out;
    width: 49%;
    display: inline-block;
}
.role-tab-radio .btn:hover{
    opacity: 1 !important;
}

.role-tab-radio .btn.active,
.role-tab-radio .btn:active{
    box-shadow: none;
    background-color: #2A363B;
    color: #FFF;
    outline: 0;
    border: 1px solid #2A363B;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form ng-app="">
  
  <div data-toggle="buttons" class="role-tab-radio">
          <button class="btn btn-default"><input type="radio" name="q1" value="0">Black</button>
          <button class="btn btn-default"><input type="radio" name="q1" value="1">White</button>
        </div>

</form>

Answer 1

Попробуйте это:

В html-файле:

<div class="role-tab-radio">
   <button class="btn btn-default" ng-click="chooseColor(0)">Black</button>
   <button class="btn btn-default" ng-click="chooseColor(1)>White</button>
</div>

В контроллере:

$scope.chooseColor = function(value){
    console.log(value);
}

Что происходит, когда пользователь нажимает на одиниз этих кнопок будет вызываться функция ChooseColor, которая будет console.log выводить значение, назначенное кнопке.

В результате вы должны получить 0 от нажатия черной кнопки и 1 от нажатия белогокнопка.