Question

我正在尝试使用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>

http://codepen.io/er40/pen/NqWjRo

Answer 1

使用ng-init指令将初始值设置为first。这段代码会有所帮助：

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

Answer 2

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

JavaScript （MyCtrl.js）

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.content = 'first';
});

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

Answer 3

这是因为在启动时您的模型content未设置。您需要将其设置为“先”＆＃39;如果您希望显示该内容块。

另一种解决方法，如果你不想搞乱js，就是为第一个评论块ng-show添加另一个条件。例如，在完全没有设置内容模型时显示块。像这样：http://codepen.io/svdn/pen/wavdgR

Answer 4

将此添加到第一个输入：

ng-init="content = 'first'"

使用AngularJS显示和隐藏内容

4 个答案: