angular.js - angularjs 点击li如何添加/移除当前li class类名？

问题描述

问 题

<li ng-class="{on: onSw==true}">

                <div class="li_center">
                    <div class="select_btn" ng-click="toggleC()"></div>
                    <div class="goods_part">
                        <div class="leftbox">
                            <img src="img/product.png" width="100%" height="100%"/>
                        </div>
                        <div class="rightbox">
                            <div class="goods_content">娇韵诗清透润白柔肤水清爽型200ml</div>
                            <div class="price_area">
                                <span class="new_money">￥390.00</span>
                                <span class="old_money">￥420.00</span>
                                <span class="conter">
                                    <span class="remove_btn">-</span><input type="number" class="" value="1"/><span class="add_btn">+</span>
                                    <br clear="all"/>
                                    
                                </span>
                            </div>
                        </div>
                    </div>
                    <br clear="all"/>
                </div>
            </li>
            <li ng-class="{on: onSw==true}">
                <div class="li_center">
                    <div class="select_btn" ng-click="toggleC()"></div>
                    <div class="goods_part">
                        <div class="leftbox">
                            <img src="img/product.png" width="100%" height="100%"/>
                        </div>
                        <div class="rightbox">
                            <div class="goods_content">娇韵诗清透润白柔肤水清爽型200ml</div>
                            <div class="price_area">
                                <span class="new_money">￥390.00</span>
                                <span class="old_money">￥420.00</span>
                                <span class="conter">
                                    <span class="remove_btn">-</span><input type="number" class="" value="1"/><span class="add_btn">+</span>
                                    <br clear="all"/>
                                    
                                </span>
                            </div>
                        </div>
                    </div>
                    <br clear="all"/>
                </div>
            </li>
           <script>
var app=angular.module("myApp",[]);
app.controller("myCon",function($scope){
    
        $scope.sw=false;
        $scope.disappear=function(){
            
                $scope.sw=true;
            
            };
        $scope.onSw=false;
        $scope.toggleC=function(){
            
                $scope.onSw=!$scope.onSw;
            
            }
    
    });

</script>

不点击是这样[图片描述][1]

点击以后是这样
怎样才能做到点哪个li就改变哪个li样式？

解决方案

如果你的li是用的ng-repeat
例如item in items遍历出来的
就把数组里面每个元素都增加一个onSw,点击事件传参$index
然后function里面 $scope.items[index].onSw=true

这篇关于angular.js - angularjs 点击li如何添加/移除当前li class类名？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！