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>

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

2 个答案: