Javascript 在angularjs中将ng单击值初始化为true_Javascript_Html_Angularjs

Javascript 在angularjs中将ng单击值初始化为true

javascript html angularjs

Javascript 在angularjs中将ng单击值初始化为true,javascript,html,angularjs,Javascript,Html,Angularjs,我正在angular中使用spa，我使用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=""

我正在angular中使用spa，我使用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，因为没有单击任何链接。我希望最初显示第一页，然后在单击其他链接时隐藏。我如何才能做到这一点？

您需要在视图或控制器中对其进行初始化，以下是如何在视图中进行初始化

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

app.controller（'MainCtrl'，函数（$scope）{
$scope.first=true；
});
弗斯特
第二
第三

您需要在视图或控制器中对其进行初始化，以下是如何在视图中进行初始化

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

app.controller（'MainCtrl'，函数（$scope）{
$scope.first=true；
});
弗斯特
第二
第三

在

ng init

中定义

first=true

，这样您就不必更改控制器。但是，我建议您在

controller

还请注意，您必须在控制器中将其他

范围

变量定义为

假

，因为它们现在是

未定义（假）

，这是代码按预期执行的原因，但定义它将使其更具可读性

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.first=true；
});

弗斯特
第二
第三
在ng init
中定义first=true
，这样您就不必更改控制器。但是，我建议您在controller

还请注意，您必须在控制器中将其他范围
变量定义为假
，因为它们现在是未定义（假）
，这是代码按预期执行的原因，但定义它将使其更具可读性

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.first=true；
});

弗斯特
第二
第三
我想提出一些不同的解决方案组合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 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>


弗斯特
第二
第三

在controller或PankajParkar中定义first=true
——我在评论中也提到过：）@Rayon抱歉，我完全错过了。。我稍后刷新了评论..在controller或PankajParkar中定义first=true
-我在评论中也提到过：）@Rayon抱歉，我完全错过了。。我稍后刷新了评论。这不是ng init的目的，它在文档中声明了这一点。对于info@charlietfl，我阅读了文档。它确实说要小心使用它。这不是ng init的目的，它在文档中说明了这一点。对于info@charlietfl，我阅读了文档。它确实说要小心使用它。