单击时使用 Angular js 或 JS 显示隐藏链接答案

【问题标题】：Show hide links using angular js or JS on click单击时使用 Angular js 或 JS 显示隐藏链接
【发布时间】：2016-03-12 17:03:01
【问题描述】：

点击“显示全部”我想显示所有元素，点击链接“第一半”，我想显示“abc”“def”和“ghi”。点击第二个链接“2nd half”时，我想显示“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';

但这无法再次显示隐藏的元素。

如果您需要更多信息，请告诉我。

谢谢。

【问题讨论】：

使用ng-model 是否愿意使用document.getElementById("def").style.display？ angularjs 专门提供了一些指令来显示和隐藏元素。
我的应用程序只有角度......但我是新手所以......可能我不知道。我的问题已经解决了，但如果你能给我任何链接，这对我很有帮助。我也会尝试更多地了解这种角度指令。
ng-hide 和 ng-show。我应该写一个例子吗？
是的，使用带有范围标志的 ng-show。如果您使用 angular，这将更有意义。
@JK_Jha 请在下面查看我的答案，以通过角度方式实现相同的目标。

标签： javascript jquery html angularjs

【解决方案1】：

CSS display property 没有值 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';

【讨论】：

【解决方案2】：

尽量避免在此类任务中使用元素。您可以通过使用 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>

这里还有working example

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

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

【讨论】：

非常感谢.. 这就像一个魔法.. 但是作为一个新手.. 可能我又错过了一些东西.. 我的 css -styling 在添加 ng-show 后被破坏了。有什么建议吗？
您是使用内联 CSS 还是从样式表中导入它们？因为作用域变量与 CSS 无关，除了它所应用的元素的可见性。
我正在从样式表导入。 <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> <span ng-show="displayOne"> <li><a href="#" ng-click="load_data_for_branch()" </a></li> 如果有帮助，让我尝试创建 plunker
这是我的 pluunkr 在添加 ng-show 之前的样式：plnkr.co/edit/t5aC12BktSP6kaqByJ87?p=preview。添加ng-show后：plnkr.co/edit/6Z4azILWeWpbhsmxBbLC?p=preview
那是因为您在<li> 标签之间使用了<span> 标签。我将继续更新我的答案并在我的 plunker 上使用您的代码。给我5分钟。