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。

单击按钮时检查单选按钮

1 个答案: