Question

我根据属性id添加css类，当我点击css类添加时，当我点击第二个属性id时，添加第一个属性id的类正在删除。我如何保持css类，因为它是第一个属性id，但当我点击第二次它应该从属性中删除。

这是代码。

<div class="hmpal-prprt-post-wdgt hmpal-prprt-wishlist" 
    ng-click="WishlistAdd($index,project.propertyId)" 
     ng-class="getClass($index)" 
     ng-repeat="prop in homepalGroupProp.properties">
    <a href=""> 
        <span class="prprt-icon">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </span> 
        <span>Wishlist</span> 
    </a>
</div>

我的控制器代码是

var selectedProductId = null;
a.selectedIndex = -1;
a.WishlistAdd = function ($index, propertyId) {
    if ($index === a.selectedIndex) {
        a.selectedIndex = -1;
    } else {
        a.selectedIndex = $index;
    }
    selectedProductId = (selectedProductId === propertyId ? null : propertyId);
    var data = {
        wishlistFlag: (selectedProductId !== null),
        propertyId: propertyId
    };

    e.createWishLists(data).then(function (result) {
        console.log(JSON.stringify(result));
        a.wishlistFlag = result.config.data.wishlistFlag;
        alert(a.wishlistFlag);

    }, function (error) {
        alert("error");

    });

}

在这里添加课程功能。

 a.getClass = function(ind){
        if( ind === a.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }

Answer 1

尝试更改 ng-click 和 ng-class 属性，如下所示：

ng-click = "selectedIndex = $index" 
ng-class = "selectedIndex == $index ? 'yourClassName':''"

您不需要任何控制器代码来实现它。

<强> CSS

.yourClassName {

  background-color: black;    

}

Answer 2

这是根据您的需要实施ng-class的示例代码。我希望这对你有所帮助。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <style>
            .SelectionContainer {
                width: 100px;
                height: 100px;
                background-color: #efefef;
            }
            
            .ErrorSelect {
                background-color: red;
            }
        </style>
    </head>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <select ng-options="Option.Code for Option in OptionList track by Option.Id" ng-model="SelectedOptionValue"></select>
        
        <div class="SelectionContainer" ng-class="IsErrorSelected()"></div>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.SelectedOptionValue = {Id: "", Code: ""};
            $scope.OptionList = [{Id: 1, Code: "Option1"},
                                 {Id: 2, Code: "Option2"},
                                 {Id: 3, Code: "Never Select"},
                                 {Id: 4, Code: "Option4"}];
            
            $scope.IsErrorSelected = function(){
                var returnVal = ($scope.SelectedOptionValue.Id == 3)? "ErrorSelect": "";
                return returnVal;
            }
        });
    </script>

</body>

</html>

Answer 3

您可以在ng-class中简单检查所选索引，请参阅下面的代码

<div class="hmpal-prprt-post-wdgt hmpal-prprt-wishlist" 
        ng-click="clickedIndex = $index ;WishlistAdd($index,project.propertyId)" 
         ng-class="clickedIndex == $index ? customCss : ''" 
         ng-repeat="prop in homepalGroupProp.properties">
        <a href=""> 
            <span class="prprt-icon">
                <i class="fa fa-heart" aria-hidden="true"></i>
            </span> 
            <span>Wishlist</span> 
        </a>
</div>

自定义CSS

.customCss {
// css code
}

在角度中有条件地添加css？

3 个答案: