代码之家  ›  专栏  ›  技术社区  ›  dEs12ZER

如何在Angular5中使用NG开关实现单选按钮?

  •  1
  • dEs12ZER  · 技术社区  · 6 年前

    使用Angular5,我在Internet上找到了这个代码,我试图在应用程序中运行它,但它并没有按预期运行,问题是我可以检查所有的单选按钮,甚至在选择任何一个单选按钮元素之前也能看到第一条消息。

    <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>
    

    你知道为什么这对我不起作用吗?我没有导入任何库来使用这个示例。

    这是 link 我用这个例子,但它不适用于我在这个链接。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Sajeetharan    6 年前

    <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
    

    STACKBLITZ DEMO