Question

我有三排单选按钮，它们看起来像这样：

这是否可以使它成为一个选定的按钮在行和列中是独占的？这意味着在这个矩阵上最多只能选择3个按钮。

例如，当我选择 a2 时，不会选择此行中的按钮（ a1 ， a3 ）以及按钮此列中的内容已被禁用（ b2 ， c2 ），这意味着您无法选择 2 列（已采取此列））。

你可以帮帮我吗？

模板

<div *ngFor="let item of items">
   <span *ngFor="let inner of item.titles">
     {{inner.label}}
     <input type='radio' name='{{item.name}}'>
   </span>
</div>

组件

items = [
  {
    name: 'first',
    titles: [ {label: 'a1'}, {label: 'a2'}, {label: 'a3'} ]
  },
  {
    name: 'second',
    titles: [ {label: 'b1'}, {label: 'b2'}, {label: 'b3'} ]
  },
  {
    name: 'third',
    titles: [ {label: 'c1'}, {label: 'c2'}, {label: 'c3'} ]
  } 
]

Plunker Link

Answer 1

你可以使用复选框和Bootstrap来使事情变得更有活力。

我会在广播代码中使用类似[disabled]="items.selected.length <=3的内容，或者将它们包装在表单中。这样，当有3个或更多选定项目时，按钮将被禁用。

此处my fiddle

我确实转储了3列以简化ngFor。添加回来会很容易。

我大部分时间都是Java程序员，看着我认为有点显而易见的代码。我创建了一个Item类，并为它提供了两个变量：title和selected。

 export class Title{

  public label:string;
  public selected:boolean = false;
  constructor(label)
  {
    this.label=label;
  }

}

在HTML中，我使用(checked)在选中此框时触发更改。它调用一个函数来翻转特定项目上的选定值，并递增计数器。

<input   type="checkbox" name="label"
    [disabled]="checkedItems>=3"
    (change)="checkItem(title)"
    [checked]="title.selected" >

当计数器点击＆＃34; 3＆＃34;。

时，输入将被禁用

有一个缺点，一旦你点击3项，就没有回头路了。更智能的代码将使用[checked]调用来使用读取计数器/数组长度的函数，并禁止添加新项。它将允许取消选择已选择的项目。

Answer 2

这不是最干净的解决方案（它没有被重构以消除一些冗余字段）;这只是我设法在一个弹出窗口中进行15分钟修补工作的第一件事：

编辑/更新 以前使用ngModel的版本似乎没有很好地跨浏览器播放，所以这里是一个更新的片段（+ {{3} }）

@Component({
  selector: 'my-app',
      template: `
      <div *ngFor="let item of items">
        <span *ngFor="let inner of item.titles">
          {{inner.label}}
          <input type="checkbox" name="{{item.name}}" 
                 (click)="onClick(item.row, inner, $event.target.checked)"
                 [disabled]="!inner.state && (rows[item.row] || columns[inner.column])">
        </span>
      </div>
      `
})
export class AppComponent { 
  name = 'Angular'; 

  items: [] = [
    {
      name: 'first',
      row: 0,
      titles: [ 
        {label: 'a1', column: 0, state: false}, 
        {label: 'a2', column: 1, state: false}, 
        {label: 'a3', column: 2, state: false} 
      ]
    },
    {
      name: 'second',
      row: 1,
      titles: [ 
        {label: 'b1', column: 0, state: false}, 
        {label: 'b2', column: 1, state: false}, 
        {label: 'b3', column: 2, state: false} 
      ]
    },
    {
      name: 'third',
      row: 2,      
      titles: [ 
        {label: 'c1', column: 0, state: false}, 
        {label: 'c2', column: 1, state: false}, 
        {label: 'c3', column: 2, state: false} 
      ]
    } 
  ];

  rows: boolean[] = [false, false, false];
  columns: boolean[] = [false, false, false];

  onClick(row, inner, state) {
    this.rows[row] = state;
    this.columns[inner.column] = state;
    inner.state = state;
  }  
}

行和列的唯一单选按钮

2 个答案: