Question

我正在学习angularJs，所以我不熟悉那个＆amp;尝试在最近点击的标签上添加active class。这里我有四个标签（insert, view, update & delete）。我希望在点击此标签时将有效课程添加到insert标签。单击时查看选项卡＆amp;等等。我试过这个但没能完成这项工作。我的代码会自动将active类添加到所有选项卡。任何建议将不胜感激。抱歉我的英语不好！

body{
    background-color: #e8e8e8;
    margin: 0;
    padding: 0;
}

.menu-content{
    padding: 30px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.menu-content button{
    background-color: dimgrey;
    color: #FFF;
    font-family: "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
    font-size: 16px;
    border: 1px solid dimgrey;
    height: 35px;
    width: 100px;
}

.menu-content button:hover{
    color: gold;
    cursor: pointer;
}

.crud{
    padding: 30px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    border: 1px solid #aaa;
}

.active{
    color: gold !important;
    cursor: pointer !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="myController">
    <div class="menu-content">
        <button ng-click="activeClass('insert')" ng-class="{active: true}">Insert</button>
        <button ng-click="activeClass('view')" ng-class="{active: true}">View</button>
        <button ng-click="activeClass('update')" ng-class="{active: true}">Update</button>
        <button ng-click="activeClass('delete')" ng-class="{active: true}">Delete</button>
    </div>
    <div class="crud" ng-show="menu.insert">Insert</div>
    <div class="crud" ng-show="menu.view">View</div>
    <div class="crud" ng-show="menu.update">Update</div>
    <div class="crud" ng-show="menu.delete">Delete</div>
</div>

<script>
    (function(){
        var app = angular.module('myApp',[ ]);
        app.controller('myController', function($scope){
            $scope.menu = {};
            $scope.menu.insert = true;
            $scope.menu.view = false;
            $scope.menu.update = false;
            $scope.menu.delete = false;

            $scope.activeClass = function(tab){
                $scope.menu.insert = false;
                $scope.menu.view = false;
                $scope.menu.update = false;
                $scope.menu.delete = false;
                if(tab == 'insert') $scope.menu.insert = true;
                else if(tab == 'view') $scope.menu.view = true;
                else if(tab == 'update') $scope.menu.update = true;
                else $scope.menu.delete = true;
            }
        });
    })();
</script>

enter image description here

Answer 1

它应该是ng-class="{ active: menu.insert }"等等......这是您修改过的代码段：

＆＃13;

body{
    background-color: #e8e8e8;
    margin: 0;
    padding: 0;
}

.menu-content{
    padding: 30px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.menu-content button{
    background-color: dimgrey;
    color: #FFF;
    font-family: "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
    font-size: 16px;
    border: 1px solid dimgrey;
    height: 35px;
    width: 100px;
}

.menu-content button:hover{
    color: gold;
    cursor: pointer;
}

.crud{
    padding: 30px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    border: 1px solid #aaa;
}

.active{
    color: gold !important;
    cursor: pointer !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="myController">
    <div class="menu-content">
        <button ng-click="activeClass('insert')" ng-class="{active: menu.insert}">Insert</button>
        <button ng-click="activeClass('view')" ng-class="{active: menu.view}">View</button>
        <button ng-click="activeClass('update')" ng-class="{active: menu.update}">Update</button>
        <button ng-click="activeClass('delete')" ng-class="{active: menu.delete}">Delete</button>
    </div>
    <div class="crud" ng-show="menu.insert">Insert</div>
    <div class="crud" ng-show="menu.view">View</div>
    <div class="crud" ng-show="menu.update">Update</div>
    <div class="crud" ng-show="menu.delete">Delete</div>
</div>

<script>
    (function(){
        var app = angular.module('myApp',[ ]);
        app.controller('myController', function($scope){
            $scope.menu = {};
            $scope.menu.insert = true;
            $scope.menu.view = false;
            $scope.menu.update = false;
            $scope.menu.delete = false;

            $scope.activeClass = function(tab){
                $scope.menu.insert = false;
                $scope.menu.view = false;
                $scope.menu.update = false;
                $scope.menu.delete = false;
                if(tab == 'insert') $scope.menu.insert = true;
                else if(tab == 'view') $scope.menu.view = true;
                else if(tab == 'update') $scope.menu.update = true;
                else $scope.menu.delete = true;
            }
        });
    })();
</script>

＆＃13;

Answer 2

谢谢大家，终于解决了我的问题。我误将我的约束表达式误认为ng-class。我解决了这个ng-class="{active: menu.insert}"。现在我了解如何正确使用ng-class。我需要在点击它时才需要true＆amp;其他选项卡表达式应为false。这就是我过去常常要解决的问题。

body{
    background-color: #e8e8e8;
    margin: 0;
    padding: 0;
}

.menu-content{
    padding: 30px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.menu-content button{
    background-color: dimgrey;
    color: #FFF;
    font-family: "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
    font-size: 16px;
    border: 1px solid dimgrey;
    height: 35px;
    width: 100px;
}

.menu-content button:hover{
    color: gold;
    cursor: pointer;
}

.crud{
    padding: 30px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    border: 1px solid #aaa;
}

.active{
    color: gold !important;
    cursor: pointer !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="myController">
    <div class="menu-content">
        <button ng-click="activeClass('insert')" ng-class="{active: menu.insert}">Insert</button>
        <button ng-click="activeClass('view')" ng-class="{active: menu.view}">View</button>
        <button ng-click="activeClass('update')" ng-class="{active: menu.update}">Update</button>
        <button ng-click="activeClass('delete')" ng-class="{active: menu.delete}">Delete</button>
    </div>
    <div class="crud" ng-show="menu.insert">Insert</div>
    <div class="crud" ng-show="menu.view">View</div>
    <div class="crud" ng-show="menu.update">Update</div>
    <div class="crud" ng-show="menu.delete">Delete</div>
</div>

<script>
    (function(){
        var app = angular.module('myApp',[ ]);
        app.controller('myController', function($scope){
            $scope.menu = {};
            $scope.menu.insert = true;
            $scope.menu.view = false;
            $scope.menu.update = false;
            $scope.menu.delete = false;

            $scope.activeClass = function(tab){
                $scope.menu.insert = false;
                $scope.menu.view = false;
                $scope.menu.update = false;
                $scope.menu.delete = false;
                if(tab == 'insert') $scope.menu.insert = true;
                else if(tab == 'view') $scope.menu.view = true;
                else if(tab == 'update') $scope.menu.update = true;
                else $scope.menu.delete = true;
            }
        });
    })();
</script>

在ng-class我所做的是

<div class="menu-content">
    <button ng-click="activeClass('insert')" ng-class="{active: menu.insert}">Insert</button>
    <button ng-click="activeClass('view')" ng-class="{active: menu.view}">View</button>
    <button ng-click="activeClass('update')" ng-class="{active: menu.update}">Update</button>
    <button ng-click="activeClass('delete')" ng-class="{active: menu.delete}">Delete</button>
</div>

再次感谢所有人：）

Answer 3

因为在评论中放置代码不会说清楚，因此将其作为我想在评论中说出的答案。

    <div class="menu-content">
        <button ng-click="menu.selected = 'insert'" ng-class="{active: menu.selected == 'insert'}">Insert</button>
        <button ng-click="menu.selected = 'view'" ng-class="{active: menu.selected == 'view'}">View</button>
        <button ng-click="menu.selected = 'update'" ng-class="{active: menu.selected == 'update'}">Update</button>
        <button ng-click="menu.selected = 'delete'" ng-class="{active: menu.selected == 'delete'}">Delete</button>
    </div>
    <div class="crud" ng-show="menu.selected == 'insert'">Insert</div>
    <div class="crud" ng-show="menu.selected == 'view'">View</div>
    <div class="crud" ng-show="menu.selected == 'update'">Update</div>
    <div class="crud" ng-show="menu.selected == 'delete'">Delete</div>

注意：我没有测试过代码，但应该足以为您提供概念

这将删除额外的bool变量，并作为枚举。

因此扩展它将比bool方法更容易

要单击选项卡的活动类

3 个答案: