Question

在我的菜单中，我有很多打开子菜单的按钮。
由于我不想在我的代码中进行大量切换，以检查按下哪个按钮以及要设置动画的菜单，我想尝试以下操作：

在 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;
}
});

你可以看到我尝试了一些东西，但没有任何作用有没有办法做我想要的，或者有更好的办法吗？我正在寻找一个解释清楚的答案。

Answer 1

切换视图的最简单方法是以下示例。只需使用var = !var切换值，然后将其与ng-show：

结合使用

＆＃13;

var myApp = angular.module('myApp',[]);

＆＃13;

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

＆＃13;

基于参数（角度）调用特定元素的ng-show

1 个答案: