angular.js - angular js点击按钮隐藏选中元素

Question

如何点击按钮就删除选中元素？
<p class="Shopping_car" ng-app="myApp" ng-controller="myCon">

    <p class="headerW">
        <p class="header">
            购物车(2)
            <span class="trash_can" ng-click="remove($index)"></span>
            <br clear="all"/>
        </p>
    </p>
    <p class="mainbody">
        <ul>
            <li class="product_li" ng-class="{on:x.onSw}" ng-hide="x.li_hide" ng-repeat="x in products_mes">
                <p class="li_center">
                    <p class="select_btn" ng-click="toggleC($index)"></p>
                    <p class="goods_part">
                        <p class="leftbox">
                            <img src="{{x.products_img}}" width="100%" height="100%"/>
                        </p>
                        <p class="rightbox">
                            <p class="goods_content">{{x.content}}</p>
                            <p class="price_area">
                                <span class="new_money">{{x.newMoney}}</span>
                                <span class="old_money">{{x.oldMoney}}</span>
                                <span class="conter">
                                    <span class="remove_btn">-</span><input type="number" class="" value="1"/><span class="add_btn">+</span>
                                    <br clear="all"/>
                                    
                                </span>
                            </p>
                        </p>
                    </p>
                    <br clear="all"/>
                </p>
            </li>
            
            <li class="lost" ng-hide="sw">
                <p class="li_center">
                    <p class="select_btn"></p>
                    <p class="lose">失效</p>
                    <p class="goods_part">
                        <p class="leftbox">
                            <img src="img/product.png" width="100%" height="100%"/>
                        </p>
                        <p class="rightbox">
                            <p class="goods_content">娇韵诗清透润白柔肤水清爽型200ml</p>
                            <p 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>
                            </p>
                        </p>
                    </p>
                    <br clear="all"/>
                </p>
            </li>
          <script>
var app=angular.module("myApp",[]);
app.controller("myCon",function($scope){
    
        $scope.sw=false;
        $scope.disappear=function(){
            
                $scope.sw=true;
            
            };
        
        $scope.products_mes=[
        
        {
                
                onSw:false,
                content:"娇韵诗清透润白柔肤水清爽型200ml",
                newMoney:"￥390.00",
                oldMoney:"￥420.00",
                products_img:"img/product.png"
            
        },
        {
                
                onSw:false,
                content:"娇韵诗清透润白柔肤水清爽型100ml",
                newMoney:"￥390.00",
                oldMoney:"￥420.00",
                products_img:"img/product.png"
            
        }
        ];
        $scope.products_mes.onSw=false;
        $scope.toggleC=function($index){
                
                
                $scope.products_mes[$index].onSw=!$scope.products_mes[$index].onSw;
                var index = $scope.products_mes.indexOf($index);
                if($scope.products_mes[$index].onSw){
                    
                        
                    
                    }
            };
            
        $scope.delProds =[];
        
    
    
    });

</script>
点击.trash_can按钮隐藏选中的li标签

Answer 1

建一个空数组 用来存放你需要删除数据的index 例如delProds

在你的checkbox上加上ng-click
触发时判断为true的时候就把这个产品的index push到delProds数组
为false的时候从delProds里面删除

然后在点击删除按钮的时候把对应序号的数据都删除掉就可以了

Answer 2

用splice(),比如products_mes.splice(下标,1) 可以删除数组的某一项

Answer 3

$scope.remove = function(idx) {
    $scope.products_mes.splice(idx, 1);
}

Answer 4

var index = products_mes.indexOf(data);
products_mes.splice(index,1);
data：为选中的那个对象

Answer 5

splice