轉換jQuery來AngularJs

讓事情簡單，我有兩種類型的CSS項目：轉換jQuery來AngularJs

<style> 
.minified nav>ul>li>a .menu-item-parent,.minified nav>ul>li>a>b { 
    display: none; 
} 
.minified #leftMenu { 
    width: 45px; 
    } 
</style>

而且下面的JavaScript：

 // COLLAPSE LEFT NAV 
$('.minifyme').click(function(e) { 
    $('body').toggleClass("minified"); 
    $(this).effect("highlight", {}, 500); 
    e.preventDefault(); 
});

，你可以看到，點擊發生兩件事：

左側菜單寬度縮小爲45px;
菜單系統的文本變爲顯示：無。

[在這裏輸入的形象描述] [1]

我知道如何角設法切換一個類或ID與納克級，但不能與多個CSS元素，在這種情況下：＃！ leftMenu & < li>項目。

有人願意提供一些想法嗎？

感謝

我有一個事先知情同意，以更好地說明，但顯然「智慧」的決定我必須有更多的點來這樣做。

我想這一點，它不工作：

<aside id="left-panel" data-ng-controller="SideMenuCtrl as vm" data-ng-class="{ minified: vm.menuOpen }"> 
     ...... 
      <ul> 
       <li> 
        <a href="#">Typography</a> 
       </li> 
       <li> 
        <a href="#">Pricing Tables</a> 
       </li> 
       <li> 
        <a href="#">Invoice</a> 
       </li> 
       <li> 
        <a href="#" target="_top">Login</a> 
       </li> 
       <li> 
        <a href="#" target="_top">Register</a> 
       </li> 
       <li> 
        <a href="#" target="_top">Locked Screen</a> 
       </li> 
       <li> 
        <a href="#">Error 404</a> 
       </li> 
       <li> 
        <a href="#">Error 500</a> 
       </li> 
       </ul> 
     </li> 
    </ul> 
</nav> 
<span><a data-ng-click="vm.toggleMenu"><i class="fa fa-arrow-circle-left hit"></i></a></span> 
... 

    </aside> 


    <script> 

    angular.module('app').controller(controllerId, 
    ['$scope', SideMenuCtrl]); 

function SideMenuCtrl($scope) { 
    ..... 
    vm.menuOpen = true; 
    vm.toggleMenu = function(){ 
     vm.menuOpen = !vm.menuOpen; 
     }; 
...

華友世紀，得到它的工作，我在遺忘VM壞。在旁邊標記。即。 {精縮：vm.menuOpen}」

來源

2014-02-28 Geo 195

請參閱上面的形容詞 –

你可以使用這樣的事情：

myApp.controller('MainController', function($scope){ 
    $scope.menuOpen = false; 
    $scope.toggleMenu = function(){ 
     $scope.menuOpen = !scope.menuOpen; 
    }; 
});

然後你可以使用這個屬性來指定任何你想要的CSS類如：

<html ng-app="myApp" ng-controller="MainController"><body ng-class="{ minified: menuOpen }">

來源

2014-02-28 20:46:11

如何觸發各種項目，因爲在這種情況下，菜單文本不顯示，寬度爲45px？我看到你在做什麼，但我看不到你是如何觸發各種CSS元素的。 –

在t上使用'menuOpen'屬性他可以根據需要在任何元素上設置任何類。其餘的只是普通的CSS。您也可以使用'ng-show'來顯示/隱藏元素。 –

如果你想要看起來，你可以使用動畫結合'ng-show'。請參閱http://docs.angularjs.org/api/ng/directive/ngShow。 –

轉換jQuery來AngularJs

回答

相關問題