基于参数(angular）调用特定元素上的ng show

calling ng-show on specific element based on parameter (angular)

本文关键字：元素 ng show 调用 于参数 参数 angular      更新时间：2023-12-03

在我的菜单中，我有很多打开子菜单的按钮。
由于我不希望在我的代码中有一个巨大的开关来检查按下了哪个按钮和要设置动画的菜单，我想尝试以下操作：

在HTML中，我调用函数toggleVis，并将要切换的元素的名称作为参数：

<ul class="sidebar-bottom-list" ng-controller="MenuController">
<li>
    <a href="#/dossier" ng-click="toggleVis(showSubmenuDos); go('/dossier')" ng-class="class" class="sidemenuItem"><span class="glyphicon glyphicon-folder-open">&nbsp;</span>Dossiers</a>
    <div class="list-group narrow-list-group no-padding-bottom slider-top-bottom" ng-show="showSubmenuDos" ng-class="active">
        <a href="#" class="list-group-item" ng-class="dosMenuItems(0)">lijst</a>
        <a href="#" class="list-group-item" ng-class="dosMenuItems(1)">algemeen</a>
        <a href="#" class="list-group-item" ng-class="dosMenuItems(2)">partijen</a>
        <a href="#" class="list-group-item" ng-class="dosMenuItems(3)">documenten</a>
        <a href="#" class="list-group-item" ng-class="dosMenuItems(4)">notas</a>
        <a href="#" class="list-group-item" ng-class="dosMenuItems(5)">royementen</a>
        <a href="#" class="list-group-item" ng-class="dosMenuItems(6)">urenregistratie</a>
        <a href="#" class="list-group-item" ng-class="dosMenuItems(7)">voortgang</a>
    </div>
</li>
<!-- imagine more menu items like this one -->

然后在我的main.js中，我有这样的toggleVis函数：

app.controller('MenuController', function($scope, $location) {
//can be triggered by ng-click="go('/path')"
$scope.go = function(path) {
    $location.path(path);
};
//toggle visibillity
$scope.toggleVis = function(param) {
    //$scope.{param} = !$scope.{param}
    alert(param)
    $scope.param = !$scope.param;
    //param.ngShow = !param.ngShow;
    //$scope.this = !$scope.this;
}
});

正如你所看到的，我试过一些东西，但都不起作用
有没有办法做我想做的事，或者有没有办法把这件事做得更好
我正在寻找一个解释清楚的答案。

切换视图的最简单方法是下面的示例。只需在点击var = !var时切换值，并将其与ng-show:组合即可

var myApp = angular.module('myApp',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <button ng-click="show = !show">Toggle</button>
  <p ng-show="show">I am getting shown and hidden!</p>
</div>

相关文章：