angular - 如何在angular5中使用ng-switch实现单选按钮？

Question

使用 angular5，我在互联网上找到了这段代码，我试图在我的应用程序中运行它，因为我想要同样的东西，它没有按预期工作，问题是我可以检查所有单选按钮，我也可以看到甚至在选择任何单选按钮元素之前的第一条消息。

<form>
      Pick a topic:
      <input type="radio" ng-model="myVar" value="dogs">Dogs
      <input type="radio" ng-model="myVar" value="tuts">Tutorials
      <input type="radio" ng-model="myVar" value="cars">Cars
    </form>

    <div ng-switch="myVar">
      <div ng-switch-when="dogs">
         <h1>Dogs</h1>
         <p>Welcome to a world of dogs.</p>
      </div>
      <div ng-switch-when="tuts">
         <h1>Tutorials</h1>
         <p>Learn from examples.</p>
      </div>
      <div ng-switch-when="cars">
         <h1>Cars</h1>
         <p>Read about cars.</p>
      </div>
    </div>

知道为什么这对我不起作用吗？我没有导入任何库来处理这个例子。

这是我用于此示例的链接，但它不适用于我在此链接中。

标签： angularradio-buttonangular5frontendng-switch

Answer 1

您可以使用 angular 执行以下操作

<input type="radio" value="dogs" name="comp" [(ngModel)]="radioValue"> A
<input type="radio" value="tuts" name="comp" [(ngModel)]="radioValue"> B
<input type="radio" value="cars" name="comp" [(ngModel)]="radioValue"> C

堆栈闪电战演示