Angular JS 列表修改

最新推荐文章于 2024-09-05 08:55:55 发布

原创最新推荐文章于 2024-09-05 08:55:55 发布 · 386 阅读

1 ·

CC 4.0 BY-SA版权

AngularJs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的商品管理系统，该系统支持商品的增删改查及批量操作，并提供了商品信息的排序和搜索功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.yellowline{
background-color: yellow;
}
.redline{
background-color: red;
}

查询:

排序：

–请选择–
–名称正序–
–名称倒序–
–价格正序–
–价格倒序–

    </div>

    <div ng-show="showAdd">
        <ul style="list-style: none;">
            <li>商品编号：
                <input type="text" name="" id="" value=""  ng-model="asid" />

            </li>
            <li>商品名称：
                <input type="text" name="" id="" value=""  ng-model="aname" />

            </li>
            <li>商品价格：
                <input type="text" name="" id="" value="" ng-model="aprice" />

            </li><li>商品产地：
                <input type="text" name="" id="" value=""  ng-model="aproduct" />

            </li>
            <li>
                <input type="button" id="" value="添加" ng-click="addShop()" />

            </li>
        </ul>

    </div>


    <div>
        <input type="button" id="" value="批量删除"  ng-click="delMore()" />
    </div>
    <table border="1" cellspacing="0" cellpadding="1" width="50%" style="text-align: center;" ng-show="isShowTable">
        <tr style="background-color: gray;">
            <th><input type="checkbox" name="" id="" value=""  ng-model="checkAll"/></th>
            <th>序号</th>
            <th>id</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>产地</th>
            <th>操作</th>
        </tr>
        <!--|filter:{name:searchKey} 按照商品名过滤     |filter:searchKey  所有字段都可以过滤 -->
        <tr ng-repeat="x in shops|filter:searchKey|orderBy:orderbyKey" class="{{$index%2==0?'redline':'yellowline'}}">
            <td><input type="checkbox" name="" id="" value="{{x.sid}}" ng-model="checkAll" /></td>
            <td>{{$index}}</td>
            <td>{{x.sid}}</td>
            <td>{{x.name}}</td>
            <td>{{x.price}}</td>
            <td>{{x.product}}</td>
            <td>
                <input type="button" id="" value="删除" ng-click="del($index)" />
                <input type="button" id="" value="修改"  ng-click="modify(x.sid)"/>

            </td>



        </tr>
    </table>

    <div ng-show="showModify">
        <ul style="list-style: none;">

            <li>商品名称：
                <input type="text" name="" id="" value=""  ng-model="mname" />

            </li>
            <li>商品价格：
                <input type="text" name="" id="" value="" ng-model="mprice" />

            </li><li>商品产地：
                <input type="text" name="" id="" value=""  ng-model="mproduct" />

            </li>
            <li>
                <input type="button" id="" value="修改" ng-click="modifyShop()" />

            </li>
        </ul>

    </div>

    </center>
    <script type="text/javascript">
        var app=angular.module("myapp",[]);
        app.controller("myctrl",function($scope){
            //初使化 是 “请选择”
            $scope.orderbyKey="0";
            //是否隐藏列表
            $scope.isShowTable=true;

            //是否隐藏添加布局
            $scope.showAdd=false;

            //是否隐藏修改布局
            $scope.showModify=false;

            //初使化列表数据
            $scope.shops=[{sid:"001",name:"小米",price:3400,product:"北京"},{sid:"002",name:"华为",price:5400,product:"上海"},{sid:"003",name:"vivo",price:8000,product:"北京"},{sid:"004",name:"oppo",price:2300,product:"北京"}];


            //定义删除方法
            $scope.del=function(id){

// for (var i = 0; i < $scope.shops.length; i++) { // if($scope.shops[i].sid==id){//根据sid这个字段进行判断 // $scope.shops.splice(i,1); // break; // } // }$ scope.shops.splice(id,1);

// if( $scope.shops.length==0){ // //隐藏列表 //$ scope.isShowTable=false;
// }

            }
            //定义批量删除的方法
            $scope.delMore=function(){
                //得到选中的checkbox
                var cbs=$("input:checked");
                cbs.each(function(){

// alert( $(this).val()); for (var i = 0; i <$ scope.shops.length; i++) {
if( $scope.shops[i].sid==$ (this).val()){
$scope.shops.splice(i,1);
break;
}
}

                });

                if($scope.shops.length==0){
                    //隐藏列表
                    $scope.isShowTable=false;
                }


            }

            //显示或隐藏添加布局

// $scope.isShowAdd=function(){ // if($ scope.showAdd==true){
// $scope.showAdd=false; // }else{ //$ scope.showAdd=true;
// }
// }

            //添加商品
            $scope.addShop=function(){

                var newShop={};
                newShop.sid=$scope.asid;
                newShop.name=$scope.aname;
                newShop.price=$scope.aprice;
                newShop.product=$scope.aproduct;

                //添加到集合中
                $scope.shops.push(newShop);

                //隐藏添加布局
                $scope.showAdd=false;
                //清空数据
                $scope.asid="";
                $scope.aname="";
                $scope.aprice="";
                $scope.aproduct="";
            }

            //定义一个全局变量
            var modifyData;
            //修改
            $scope.modify=function(sid){
                //显示
                $scope.showModify=true;
                for (var i = 0; i < $scope.shops.length; i++) {
                    if($scope.shops[i].sid==sid){
                        modifyData=$scope.shops[i];
                        break;
                    }

                }
                //赋值
                $scope.mname=modifyData.name;
                $scope.mprice=modifyData.price;
                $scope.mproduct=modifyData.product;


            }

            //真正修改数据
            $scope.modifyShop=function(){
                modifyData.name=$scope.mname;
                modifyData.price=$scope.mprice;
                modifyData.product=$scope.mproduct;
                //隐藏
                $scope.showModify=false;

            }





        });

    </script>




</body>