Angularjs - 如何在单击特定链接时显示特定div并隐藏先前的div，类似于使用ng repeat的选项卡_编程开发

Angularjs - 如何在单击特定链接时显示特定div并隐藏先前的div，类似于使用ng repeat的选项卡

创始人

2024-10-27 00:32:14

0次

你可以使用ng-show和ng-click指令来实现这个功能。

首先，你需要在控制器中定义一个变量来跟踪当前显示的div。然后，使用ng-show指令根据变量的值来显示或隐藏特定的div。

接下来，在每个链接上使用ng-click指令来触发一个函数，这个函数会更新当前显示的div的变量，并隐藏之前显示的div。

下面是一个示例代码：

HTML模板：


  Div 1
  Div 2

  This is div 1
  This is div 2

JavaScript控制器：

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.currentDiv = 'div1';

    $scope.showDiv = function(divName) {
      $scope.currentDiv = divName;
    };
});

在上面的示例中，当你点击“Div 1”链接时，会显示“This is div 1”，同时隐藏“This is div 2”。当你点击“Div 2”链接时，会显示“This is div 2”，同时隐藏“This is div 1”。

希望这可以帮助到你！

上一篇：AngularJS - 如何在 ng-repeat 中按整数数组进行筛选？

下一篇：AngularJS - 如何在点击时迭代数组

Angularjs - 如何在单击特定链接时显示特定div并隐藏先前的div，类似于使用ng repeat的选项卡

相关内容

热门资讯