点击显示使用角js或JS的隐藏链接

Question

点击“显示所有”我想显示所有的元素，在点击链接“上半年”，我想显示"abc“"def”和"ghi“。点击第二链接“下半年”，我想显示"jkl"，"mno“和"pqr”。再次点击链接“显示所有"，我想显示一切。"abc“、"def”、"ghi“、"jkl”、"mno“、"pqr”。

我发现了一些类似的问题，并试图加以落实。但是我不能再次显示隐藏的元素。

下面是代码示例：

当我单击“显示前半部分”时，我在JS中这样做：

document.getElementById("abc").style.display = 'visible';
document.getElementById("def").style.display = 'visible';
document.getElementById("ghi").style.display = 'visible';
document.getElementById("jkl").style.display = 'none';
document.getElementById("mno").style.display = 'none';
document.getElementById("pqr").style.display = 'none';

再次，当我单击“显示所有”时，我是这样做的：

document.getElementById("abc").style.display = 'visible';
document.getElementById("def").style.display = 'visible';
document.getElementById("ghi").style.display = 'visible';
document.getElementById("jkl").style.display = 'visible';
document.getElementById("mno").style.display = 'visible';
document.getElementById("pqr").style.display = 'visible';

但这不能再次显示隐藏元素。

如果您需要进一步的信息，请告诉我。

谢谢。

Answer 1

尝试避免为这样的任务使用元素。您可以通过使用在作用域变量中设置的标志使用ng-show或ng-if来实现这一点。

首先在控制器中创建作用域变量。

angular.module('sample', []);
angular.module('sample').controller('sampleCtrl', ['$scope',function($scope) {
  $scope.displayAll = true;
  $scope.displayOne = true;
  $scope.displayTwo = true;

  $scope.toggleDisplayAll = function(){
       $scope.displayAll = true;
       $scope.displayOne = $scope.displayAll;
       $scope.displayTwo = $scope.displayAll;
  };
  $scope.toggleDisplayOne = function(){
     $scope.displayOne = true;
     $scope.displayTwo = false;
  };
  $scope.toggleDisplayTwo = function(){
     $scope.displayTwo = true;
     $scope.displayOne = false;
  };

}]);

现在将这些组件集成到html文件中。

    <body ng-app="sample">
     <div ng-controller="sampleCtrl">
       <button ng-click='toggleDisplayAll()'>Toggle All Display</button>
        <button ng-click='toggleDisplayOne()'>Toggle First Display</button>
        <button ng-click='toggleDisplayTwo()'>Toggle Second Display</button>
                    <nav class="navbar navbar-default">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" ><strong>Go quickly to: </strong></a>
                                </div>


                                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <ul id="test1" class="nav navbar-nav">
                                        <li id="all_sep_branch" class="active"><a href="#" ng-click="load_data_for_branch('all_branch')">All branches </a></li>

                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">abc </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">def </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">ghi </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">jkl </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">mno </a></li>



                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">pqr </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">stu </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">vwln </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">fsdfs </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">fsddf</a></li>

                                    </ul>
                                </div>

 </div>  
  </body>

这里也是工作实例

编辑：我已经更新了柱塞和答案来解决您的css问题。

解释了CSS崩溃的原因：，这是因为您在<li>标记之间使用了<span>标记。这将破坏<ul>和<li>标记之间的父级子关系。而且，当$scope.displayOne和$scope.displayTwo只是作用域变量时，它们也被用作函数。

Answer 2

显示属性没有值visible。您应该使用block而不是visible来显示隐藏元素，如下所示。

document.getElementById("abc").style.display = 'block';
document.getElementById("def").style.display = 'block';
document.getElementById("ghi").style.display = 'block';
document.getElementById("jkl").style.display = 'block';
document.getElementById("mno").style.display = 'block';
document.getElementById("pqr").style.display = 'block';