Html 使用AngularJS显示和隐藏内容

我试图使用angular在不同的内容视图之间切换。当前，它开始时不显示任何内容，然后仅在单击某个选项后在两个视图之间切换

我想要它做的是在加载时显示第一个视图，然后让我在两者之间切换

以下是当前代码：

<div ng-app="">
  <div class="wrap">
    <h1>Hello there!</h1>
    <p>Push the radio buttons to change the content!</p>
    <form> 
      <label for="first">Show first content</label>
      <input id="first" type="radio" name="content" ng-model="content" value="first">
      <br />
      <label for="other">Show other content</label>
      <input id="other" type="radio" name="content" ng-model="content" value="other">
    </form>

    <div class="wrapper">
      <p ng-show="content == 'first'">This is the first content!</p>
      <h2 ng-show="content == 'other'">This is the other content!</h2>
    </div>
  </div>
</div>

你好！
按单选按钮更改内容

显示第一个内容


显示其他内容
这是第一个内容

这是另一个内容！

---

您可以在控制器中设置此初始状态吗

JavaScript（MyCtrl.js）

HTML

<div ng-app="myApp">
  <div class="wrap" ng-controller="myCtrl">
    <h1>Hello there!</h1>
    <p>Push the radio buttons to change the content!</p>
    <form> 
      <label for="first">Show first content</label>
      <input id="first" type="radio" name="content" ng-model="content" value="first">
      <br />
      <label for="other">Show other content</label>
      <input id="other" type="radio" name="content" ng-model="content" value="other">
    </form>

    <div class="wrapper">
      <p ng-show="content == 'first'">This is the first content!</p>
      <h2 ng-show="content == 'other'">This is the other content!</h2>
    </div>
  </div>
</div>

你好！
按单选按钮更改内容

显示第一个内容


显示其他内容
这是第一个内容

这是另一个内容！

别忘了包括控制器

<script src="./MyCtrl.js"></script>

---

这是因为启动时未设置您的型号

内容。如果要显示该内容块，需要将其设置为“第一”

如果不想弄乱js，另一个解决方法是为第一个注释块添加另一个条件
ng show
。例如，在根本没有设置内容模型时显示块。类似这样：
使用ng init指令将初始值设置为第一个。此代码将有助于：

<div ng-app="">
  <div class="wrap">
    <h1>Hello there!</h1>
    <p>Push the radio buttons to change the content!</p>
    <form> 
      <label for="first">Show first content</label>
      <input id="first" type="radio" name="content" ng-model="content" value="first" ng-init="content='first'">
      <br />
      <label for="other">Show other content</label>
      <input id="other" type="radio" name="content" ng-model="content" value="other">
    </form>

    <div class="wrapper">
      <p ng-show="content == 'first'">This is the first content!</p>
      <h2 ng-show="content == 'other'">This is the other content!</h2>
    </div>
  </div>
</div>


你好！
按单选按钮更改内容

显示第一个内容


显示其他内容
这是第一个内容

这是另一个内容！
将此添加到第一个输入：

ng-init="content = 'first'" 

设置
content='first'和angular将处理其余部分。控制器定义位于错误的位置
ng controller
应该放在
对不起，再试一次，我编辑代码以将ng controller指令放在正确的位置。谢谢，这很有效，但我希望避免在此上添加任何JS（甚至应用程序名称）。Mukund Kumar在上面提供了一个很好的解决方案，如果你对自己感兴趣的话。是的，如果你不想使用控制器，这是一个很好的解决方案……但是说实话，在将来，如果你的功能需要更多的逻辑性，你可能会想这样做。如果你只想坚持纯HTML，这是一个很好的简单解决方案。不过，使用JS控制器可能更有用。我想这取决于OP，以及除此之外还涉及到多少。太好了。正是我想要的。谢谢@user3277733如果您对我的答案感到满意，那么请接受我的答案。我本来打算早些做，但它说我需要等待更长的时间！现在完成了。再次感谢。这并不是问题的答案。若要评论或要求作者澄清，请在他们的帖子下方留下评论-你可以随时在自己的帖子上发表评论，一旦你有足够的评论，你就可以。@Sebsemillia“我想让它在加载时显示第一个视图，然后让我在这两个视图之间切换。”我理解这一点，我认为这对用户也是有效的，如果我不回答任何人，我将永远不会得到足够的分数来评论另一篇文章。我想，如果我的回答对用户3277733不合适，我希望他能告诉我他需要做什么？谢谢
ng-init="content = 'first'"