在angularjs中将ng-click值初始化为true

Initialize ng-click value as true in angularjs

本文关键字：初始化 true ng-click angularjs 中将      更新时间：2023-09-26

我正在使用一个角度的水疗中心，在那里我使用 ng 单击在页面之间切换（通过显示和隐藏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 - 因为没有单击任何链接。我希望第一页最初显示，然后在单击另一个链接时隐藏。我该怎么做？

我想提出一些不同的解决方案组合ng-repeat和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>

演示普伦克

尔

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

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

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.first = true;
});
<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>

使用ng-init 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {});
<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>

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

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

但是正如注释和 Angular 文档所建议的那样，您应该更喜欢在控制器中初始化它。

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>
相关文章：