Question

我正在使用角度的水疗中心，我使用ng-click在页面之间切换（通过显示和隐藏div）。一切正常，这是我正在使用的代码的简化版本：

<a href="" ng-click="first=true; second=false; third=false">First</a>
<a href="" ng-click="first=false; second=true; third=false">Second</a>
<a href="" ng-click="first=false; second=false; third=true">Third</a>

<div class="container" id='settings' ng-show='first'>   First  </div>
<div class="container" id='settings' ng-show='second'>  Second </div>
<div class="container" id='settings' ng-show='third'>    Third </div>

但是，最初没有显示任何div - 因为没有单击任何链接。我想首先显示第一页，然后隐藏是否单击了另一个链接。我怎么能这样做？

Answer 1

您需要在视图或控制器中初始化它，以下是在视图中执行此操作的方法

<body ng-controller="MainCtrl" ng-init="first=true">
  <a href="" ng-click="first=true; second=false; third=false">First</a>
  <a href="" ng-click="first=false; second=true; third=false">Second</a>
  <a href="" ng-click="first=false; second=false; third=true">Third</a>

  <div class="container" id='settings' ng-show='first'>   First  </div>
  <div class="container" id='settings' ng-show='second'>  Second </div>
  <div class="container" id='settings' ng-show='third'>    Third </div>
</body>

但正如评论和角度文档所建议的那样，您应该更喜欢在控制器中初始化它。

app.controller('MainCtrl', function($scope) {
 $scope.first = true;
});

<body ng-controller="MainCtrl">
  <a href="" ng-click="first=true; second=false; third=false">First</a>
  <a href="" ng-click="first=false; second=true; third=false">Second</a>
  <a href="" ng-click="first=false; second=false; third=true">Third</a>

  <div class="container" id='settings' ng-show='first'>   First  </div>
  <div class="container" id='settings' ng-show='second'>  Second </div>
  <div class="container" id='settings' ng-show='third'>    Third </div>
</body>

Answer 2

在first=true中定义ng-init，这样您就不必更改控制器了。但是，我建议您在controller

中对其进行初始化

另请注意，您必须在控制器中将其他scope变量定义为false，因为它们是undefined(falsey)，这是代码按预期执行的原因，但定义它将使其更多可读的。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <a href="" ng-click="first=true; second=false; third=false">First</a>
  <a href="" ng-click="first=false; second=true; third=false">Second</a>
  <a href="" ng-click="first=false; second=false; third=true">Third</a>

  <div class="container" id='settings' ng-show='first'>First</div>
  <div class="container" id='settings' ng-show='second'>Second</div>
  <div class="container" id='settings' ng-show='third'>Third</div>
</div>

＆＃13;

使用ng-init

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="first = true">

  <a href="" ng-click="first=true; second=false; third=false">First</a>
  <a href="" ng-click="first=false; second=true; third=false">Second</a>
  <a href="" ng-click="first=false; second=false; third=true">Third</a>

  <div class="container" id='settings' ng-show='first'>First</div>
  <div class="container" id='settings' ng-show='second'>Second</div>
  <div class="container" id='settings' ng-show='third'>Third</div>
</div>

＆＃13;

Answer 3

我想提出ng-repeat＆amp;的不同解决方案组合。 ng-switch指令完全适合您的情况

<强>代码

$scope.items = [
   {id: 1, name: 'First'},
   {id: 2, name: 'Second'},
   {id: 3, name: 'Third'},
];

$scope.model = { selected: 1};

<强> HTML

<body ng-controller="MainCtrl">
  <a href="" ng-click="model.selected = item.id" ng-repeat="item in items">
   {{item.name}}
  </a>

  <div class="container" id='settings' ng-switch='model.selected'>
    <div ng-switch-when="1"> First </div>
    <div ng-switch-when="2"> Second </div>
    <div ng-switch-when="3"> Third </div>
  </div>
</body>

Demo Plunkr

在angularjs

3 个答案: