• angular -- ng-class该如何使用?


    ng-class是一个判断是否给某一个元素添加类名的属性:

    例如:下面是判断 是否添加 aHover 这个类名:

    <ul class="nav fl w120 o">
        <li><a ng-click="homeClick()" ng-class="{true:'aHover',false:''}[homeHover]">首页</a></li>
        <li><a ng-click="selectedClick()" ng-class="{aHover: selectedHover == true}">精选</a></li>
        <li><a ng-click="channelClick()" ng-class="{aHover: channelHover}">频道</a></li>
        <li><a ng-click="collectClick()" ng-class="{aHover: collectHover}">我的收藏</a></li>
    </ul>

    具体JS:

    myApp.controller('myAppController',['$scope',function($scope){
        $scope.homeHover = true;
        $scope.selectedHover = false;
        $scope.channelHover = false; 
        $scope.collectHover = false;
        $scope.homeClick = function(){
            $scope.homeHover = true;
            $scope.selectedHover = false;
            $scope.channelHover = false; 
            $scope.collectHover = false; 
        };
        $scope.selectedClick = function(){
            $scope.homeHover = false;
            $scope.selectedHover = true;
            $scope.channelHover = false; 
            $scope.collectHover = false; 
        };
        $scope.channelClick = function(){
            $scope.homeHover = false;
            $scope.selectedHover = false;
            $scope.channelHover = true; 
            $scope.collectHover = false; 
        };
        $scope.collectClick = function(){
            $scope.homeHover = false;
            $scope.selectedHover = false;
            $scope.channelHover = false; 
            $scope.collectHover = true; 
        };
    }]);
  • 相关阅读:
    AT2667-[AGC017D]Game on Tree【SG函数】
    P5163-WD与地图【tarjan,整体二分,线段树合并】
    P4258-[WC2016]挑战NPC【带花树】
    P7099-[yLOI2020]灼【数学期望,结论】
    P5056-[模板]插头dp
    P2012-拯救世界2【EGF】
    [CSP校内集训]替换游戏(tarjan+离散化)
    4.24作业
    【题解】考分鄙视
    【题解】鱼塘钓鱼
  • 原文地址:https://www.cnblogs.com/e0yu/p/8709146.html
Copyright © 2020-2023  润新知