Question

我希望有一个广播组，其中每个标签右侧都有一个可点击图标，不会选择该元素，只会执行点击事件。单击标签中的任何其他区域应选择无线电组中的该项目。但是点击图标应该只执行该代码。

问题在于<label>假定对其区域内的任何点击进行全部控制。我已经调整了x索引，并且根本无法在不选择无线电组中的项目的情况下使图标可点击。我正在使用angularjs和离子框架。

<label class="item-button-right item item-radio" >
  <input type="radio" name="radio-group">
  <div class="item-content disable-pointer-events" >
    <span>My Radio Button</span>
    <button ng-click="doSomething(); $event.stopPropagation();" class="button button-icon radio-button">
      <i class="button-icon icon ion-ios-information-outline"></i><i class="icon ion-ios-arrow-right"></i>
    </button>
  </div>
  <i class="radio-icon disable-pointer-events icon ion-checkmark"></i>
</label>

Answer 1

如果我理解你的身份，那么你可以在ng-repeat中添加ng-click选项。然后只需传入范围名称并执行其中的操作。
实施例 Html示例

 <h5>Your group</h5>
            <ul class="list-group" ng-repeat="obj in objs">
                <li class="list-group-item">
                    {{obj.name}}
                    <button class="btn btn-primary btn-xs" data-title="View" data-toggle="modal" data-target="#view" ng-click="Dosomething(obj.name)"><span class="glyphicon glyphicon-pencil"></span></button>
                    <input type="radio" ng-model="color.name" ng-value="specialValue">
                    <input type="radio" ng-model="color.name" value="red">
                    color = {{color.name | json}}
                </li>
            </ul>

脚本示例

app.controller('ExampleController', ['$scope', function($scope) {
  $scope.color = {
    name: 'blue'
  };
  $scope.specialValue = {
    "id": "12345",
    "value": "green"
  };
  $scope.Dosomething = function(name) {
    alert("MyName");
};

}]);

Answer 2

您还可以通过将按钮/图标html移出标签来获取css定位路线，然后使用css将其预置在您需要的位置。有点像这个小提琴：https://jsfiddle.net/nwx9kzw1/

这是完成工作的一些示例css：

.special-icon-class{
  position:relative;
  z-index: 999;
  top:1px;
  left:25px;
}

如何在无线电控制中获得表格标签内的可点击按钮

2 个答案: