AngularJS -切换视图

AngularJS - Toggle view

本文关键字：视图 AngularJS      更新时间：2023-09-26

我有下面的控制器函数，它返回一个布尔值。

当前HTML

: 

<a href="#" ng-click="collapseNavbar(true)" ng-model="collNavbar">
    <i class="fa fa-arrow-right"></i>
</a>

layoutController:

<>之前App.controller('layoutController'， ['$scope'， function($scope) {美元的范围。collapseNavbar = function(val) {返回美元范围。Value = !val;}}))之前

基于该值，我需要为<body>标签分配一个类，如yes或no。

早先我是用这样的东西来做的。

HTML: 

<div class="toggle-sidebar navbar-nav">
     <ul class="nav navbar-nav">
        <li>
            <a href="#" ng-click="isActive = !isActive" ng-model="collNavbar">
                <i class="fa fa-arrow-right"></i>
            </a>
        </li>
    </ul>
</div>

HTML2 

<body ng-class="{'yes': isActive, 'no': !isActive}" ng-controller="layoutController">

但是我不希望我的代码在HTML文件中。相反，我为它创建了一个名为layoutController.js的控制器，上面是其中使用的代码。

我能够将布尔值作为一个类传递给页面加载上的body标签。

但是我不知道如何在点击a标签时传递它，因为我已经使用ng-click传递了函数。

任何建议，比如我该怎么做，都会对我的学习很有帮助。

试试这个:

<body ng-controller="layoutController" ng-app="App" 
                ng-class="getClass(value)">
   <a href="#" ng-click="collapseNavbar(!value)" ng-model="collNavbar">
        <i class="fa fa-arrow-right"></i>
    </a>
 </body>

控制器:

App.controller('layoutController', ['$scope', function($scope) {
    $scope.collapseNavbar = function(val) {
        return $scope.value = val;
    }
    $scope.getClass = function(value) {
         return value ? 'yes': 'no';
    }
}])

ngClass指令允许你通过绑定一个表示所有要添加的类的表达式来动态地在HTML元素上设置CSS类。

设置表达式的一种方法是返回一个表示CSS类的字符串(或以空格分隔的字符串)。

HTML 

  <body ng-class="{'yes': isActive, 'no': !isActive}" ng-controller="layoutController">
    <div class="toggle-sidebar navbar-nav">
         <ul class="nav navbar-nav">
            <li>
                <a href="#" ng-click="collapseNavbar()" ng-model="collNavbar">
                    <i class="fa fa-arrow-right"></i>
                </a>
            </li>
        </ul>
    </div>
    </body>
控制器

App.controller('layoutController', ['$scope', function($scope) {
    $scope.collapseNavbar = function() {
        $scope.isActive= ! $scope.isActive;
    }
}]);

或

HTML 

  <body class="{{className}}" ng-controller="layoutController">
    <div class="toggle-sidebar navbar-nav">
         <ul class="nav navbar-nav">
            <li>
                <a href="#" ng-click="collapseNavbar()" >
                    <i class="fa fa-arrow-right"></i>
                </a>
            </li>
        </ul>
    </div>
    </body>
控制器

App.controller('layoutController', ['$scope', function($scope) {
    $scope.collapseNavbar = function() {
        if($scope.isActive)
           $scope.className='yes';
        else
          $scope.className='no';
        $scope.isActive = !$scope.isActive;
    }
}]);
相关文章：