javascript - Angular 三态拨动开关

Question

在我的 Angular 6 应用程序中，我需要使用具有顺序的三态拨动开关，

---ON---NA---OFF---

为此，我使用了以下 Html，

<div class="switch-toggle switch-3 switch-candy">
   <input id="on" name="state-d" type="radio" checked="">
   <label for="on" onclick="">ON</label>

   <input id="na" name="state-d" type="radio" checked="checked">
   <label for="na" onclick="">N/A</label>

   <input id="off" name="state-d" type="radio">
   <label for="off" onclick="">OFF</label>

   <a></a>
</div>

无法共享 css 文件，因为它有很多代码..

工作示例: https://stackblitz.com/edit/angular-6-template-driven-form-validation-z2rsig

您可以在其中看到两次制作的开关盒，其中第一个完全是硬编码的单选按钮..

但在第二个我试图让它动态但我无法获得所选开关的相同 UI 和值..

我需要的是，需要制作三态拨动开关，其值为On --- NA --- Off。如果用户切换到 Off 那么 state-d 的值需要是 Off 如果它是 On 那么state-d 的值需要为 On 并且对于 NA 也是如此。默认情况下，需要选择(选中)NA..

我需要链接中的第一个结果 https://stackblitz.com/edit/angular-6-template-driven-form-validation-z2rsig

但是单选按钮需要是动态的，就像我在同一个链接中的第二个按钮中尝试的一样..(它不起作用)。

HTML:

<div *ngFor="let option of options" class="switch-toggle switch-3 switch-candy">
        <div class="radio">
            <input type="radio"
               name="state-d"
               id="{{option.id}}"
               [(ngModel)]="value"
               [value]="option.value"
               />
        <label for="{{option.id}}">{{option.id}}
        </label>
    </div>
  </div>

时间:

    public options = [
    {value: "on", id:"On"},
    {value: "na", id:"NA"},
    {value: "off", id:"Off"},
  ]

我还需要获取当前开关的值。

请帮助我通过动态生成单选按钮实现预期结果，并在切换按钮时使 NA 默认值相应地更改值..

预期结果不使用任何第三方库(甚至不允许 Angular Material )或 jquery..如果 UI 有变化但预期是好的结果是纯 Angular ，基于 typescript /javascript。

Answer 1

我真的很喜欢 ng-bootstrap 的单选按钮 https://ng-bootstrap.github.io/#/components/buttons/examples#radio(好吧，你可以添加样式

.btn-primary.focus, .btn-primary:focus {  
   box-shadow: 0 0 0 0; 
}

避免焦点上出现“丑陋”的阴影)

不用第三方库做一些类似玩css的。如果我们有这样的选项

<div *ngFor="let option of options" style="display:inline"  
    [className]="value==option.value?'active':'noactive'" >
    <input class="radio" type="radio" name="state-d" id="{{option.id}}"
            [(ngModel)]="value" [value]="option.value" />
        <label for="{{option.id}}">
           {{option.id}}
        </label>
</div>

简单添加

[type="radio"].radio {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}
.active{
   color:red;
}
.noactive{
   color:blue;
}

删除“插入符号”并为单选按钮赋予一些样式。好吧，制作一个更复杂的动画。我将尝试使用 Angular Animations 定义三种状态，但我不太确定如何实现它

更新 使用 Angular 动画在这种情况下，Angulars 动画很简单。刚刚定义了三个状态(我做了一个非常简单的例子(我的选项将是一个简单的数组)

动画只是定义状态以及如何将一种状态传递给另一种状态

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('posX',[
      state('uno',style({transform:'translateX(0)'})),
      state('dos',style({transform:'translateX(100px)'})),
      state('tres',style({transform:'translateX(200px)'})),
      transition('* => uno',animate(200)),
      transition('* => dos',animate(200)),
      transition('* => tres',animate(200)),
    ])
  ]
})
export class AppComponent {
  pos:string='uno';
  pos2:string='uno';
  options=['uno','dos','tres'];
}

动画只说，当[@posX]是'uno'时，没有平移，当[@posX]是'dos'时向左平移100px，当[@posX]是'tres'时平移200px

一个 html 将是两个位于相同位置的 div(我使用 margin-top:-2rem)

<div style="background-color:transparent;">
  <div *ngFor="let option of options" style="display:inline;" >
    <input class="radio" type="radio" name="state-d" id="{{'l'+option}}"
            [(ngModel)]="pos" [value]="option" />
        <label class="radio" for="{{'l'+option}}">
           {{option}}
        </label>
  </div>
</div>
<div style="overflow:hidden;margin-top:-2rem">
   <div  [@posX]="pos" (@posX.done)="pos2=pos" style="background:blue;width:100px" >
      {{pos2}}
  </div>
</div>

还有一个 css 来隐藏“插入符号”并为标签提供宽度。

[type="radio"].radio {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}
label.radio
{
  width:100px;
}

你可以在stackblitz中看到

注意:显然是一个丑陋的例子，内联样式而不是 .css