在同一行和同一列中仅选择一个单选按钮

Question

我有一个单选按钮表。在单击一个时，整个列将被选中。我试图让它在同一行和同一列中只能选择一个单选按钮。

关于这个主题有一个类似的帖子有一个有效的答案： https://stackoverflow.com/a/26887972/2056066

但是，作为 Angularjs 和 Angular Material 的新手，我正在努力适当地翻译代码......有人可以帮忙吗？谢谢！

编辑：按要求提供代码。

<md-radio-group ng-model="data.group1">
  <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
  <md-radio-button value="Banana"> Banana </md-radio-button>
  <md-radio-button value="Mango">Mango</md-radio-button>
</md-radio-group>

Answer 1

您需要使用ng-change 来监控用户刚刚点击了哪一列。 row 可以直接查看如下图。这是您正在寻找的解决方案。

 <md-content layout="column" flex style="background-color:orange">
<div layout="row" layout-margin>
  <md-radio-group layout="row" flex ng-model="selectedItem.row1.value"  ng-change=check(1,selectedItem.row1)>
    <md-radio-button ng-repeat="fruit in firstRow" ng-value="$index" class="md-primary" flex="20">{{fruit.name}}</md-radio-button>
  </md-radio-group>
</div>
<div layout="row" layout-margin>
  <md-radio-group layout="row" flex ng-model="selectedItem.row2.value" ng-change=check(2,selectedItem.row2)>
    <md-radio-button ng-repeat="fruit in firstRow" ng-value="$index" class="md-primary" flex="20">{{fruit.name}}</md-radio-button>
  </md-radio-group>
</div>
</md-content>

控制器

 $scope.selectedItem = {};

$scope.firstRow = {
  0: {
    name: "Apple 1",
    value: "apple1"
  },
  1: {
    name: "Banana 1",
    value: "banana1"
  },
  2: {
    name: "Mango 1",
    value: "mango1"
  },
   3: {
    name: "Grapes 1",
    value: "grapes1"
  },
   4: {
    name: "Strawberry 1",
    value: "strawberry1"
  },

};

$scope.check = function(row, data){

data.row = row;
data.name = $scope.selectedItem[data.value];

angular.forEach($scope.selectedItem, function(value,key){

  if(value.value === data.value && value.row != row){
    console.log(key)
    value.value = undefined;
    value.row = undefined;
  }
})

};

这是有效的解决方案http://codepen.io/next1/pen/NNemvJ

Answer 2

看到您的实时代码后，答案很简单，这与单选按钮的工作方式有关。 您已经设置了一个具有相同值的无线电对的无线电组。因此，当ngModel 的值为banana 时，所有带有value="banana" 的单选按钮都被选中 - 正如预期的那样。 如果您希望一次只选择一项，则应在同一个单选组中设置唯一值： http://codepen.io/yccteam/pen/grZGJM

<md-radio-group ng-model="data.group1">
<div layout="row" >
      <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
      <md-radio-button value="Banana"> Banana </md-radio-button>
      <md-radio-button value="Mango">Mango</md-radio-button>
  </div>
   <div layout="row" >
      <md-radio-button value="Orange">Orange</md-radio-button>
      <md-radio-button value="Strawberry"> Strawberry </md-radio-button>
      <md-radio-button value="Rassberry">Rassberry</md-radio-button>
</div>
    </md-radio-group>