angular增删改查

最新推荐文章于 2021-04-20 20:56:32 发布
拥抱大树
最新推荐文章于 2021-04-20 20:56:32 发布
阅读量378
点赞数
分类专栏： UI日常练习文章标签： angular增删改查
本文链接：https://blog.csdn.net/qq_42818575/article/details/81259509
版权
UI日常练习专栏收录该内容
6 篇文章 0 订阅
订阅专栏
月考练习03

.one{
background-color:coral;
}
.tow{
background-color:green;
}
</head>
<body ng-app="myapp" ng-controller="myctrl">
    <div id="box">
        <div>
            <input type="text" ng-model="keyName" placeholder="按电影名称查询"/>

            <select name="" ng-model="orderKey">
                <option value="">--请选择--</option>
                <option value="price">--售价正序--</option>
                <option value="-price">--售价倒序--</option>
                <option value="playTime">--上映时间正序--</option>
                <option value="-playTime">--上映时间倒序--</option>
            </select>

            <input type="button" ng-click="isAddShow=!isAddShow" value="添加"/>
            <input type="button" name="" id="" value="批量删除" ng-click="delMore()"/>
        </div>

        <table border="1" cellspacing="0" cellpadding="5">
            <tr style="background-color: gray;">
                <th><input type="checkbox" onclick="selAll(this)"/></th>
                <th>电影名称</th>
                <th>类别</th>
                <th>时长</th>
                <th>导演</th>
                <th>售价</th>
                <th>上映时间</th>
                <th>评分</th>
                <th>操作</th>
            </tr>
            <tr ng-repeat="x in daos|orderBy:orderKey|filter:{name:keyName}" class="{{$index%2==0?'one':'tow'}}">
                <td><input type="checkbox" value="{{x.id}}" /></td>
                <td>{{x.name}}</td>
                <td>{{x.type[0]+","+x.type[1]}}</td>
                <td>{{x.time}}</td>
                <td>{{x.author}}</td>
                <td>{{x.price|currency:"￥:"}}</td>
                <td>{{x.playTime|date:"yyyy-MM-dd hh:mm:ss"}}</td>
                <td>{{x.score}}</td>
                <td>
                    <input type="button" id="" value="删除" ng-click="del(x.id)"/>
                    <input type="button" id="" value="修改" ng-click="findMores(x.id)"/>
                </td>
            </tr>

        </table>

        <ul ng-show="isAddShow" style="list-style:none;padding-left:5px;">
            <li>名称:
                <input type="text" ng-model="aname" />
                <span id="nameSpan"></span>
            </li>
            <li>价格:
                <input type="text" ng-model="aprice" />
                <span id="priceSpan" class="reds"></span>
            </li>
            <li>类别
                <input type="text" ng-model="atype" />
                <span id="typeSpan" class="reds"></span>
            </li>
            <li>上映时间:
                <input type="date" ng-model="aplayTime" />
                <span id="playTimeSpan" class="reds"></span>
            </li>
            <li>时长:
                <input type="text" ng-model="atime" />
                <span id="timeSpan" class="reds"></span>
            </li>
            <li>导演:
                <input type="text" ng-model="gautror" />
                <span id="autrorSpan" class="reds"></span>
            </li>
            <li>评分:
                <input type="text" ng-model="ascore" />
                <span id="scoreSpan" class="reds"></span>
            </li>
            <li>
                <input type="button" value="保存" ng-click="add()" />
            </li>               
        </ul>

        <!--修改页面-->
        <ul style="list-style: none;" ng-show="isUpdateShow">
            <li>名称:
                <input type="text" ng-model="aname" />
            </li>
            <li>价格:
                <input type="text" ng-model="aprice" />
            </li>
            <li>类别
                <input type="text" ng-model="atype" />
            </li>
            <li>上映时间:
                <input type="date" ng-model="aplayTime" />
            </li>
            <li>时长:
                <input type="text" ng-model="atime" />
            </li>
            <li>导演:
                <input type="text" ng-model="gautror" />
            </li>
            <li>评分:
                <input type="text" ng-model="ascore" />
            </li>
            <li>
                <input type="button" value="修改" ng-click="update()" />
            </li>   
        </ul>

    </div>

    <script type="text/javascript">

        //全选|反选
        function selAll(obj){
            var cbs=$("td [type=checkbox]");

            if (obj.checked) {
                cbs.each(function(){
                    $(this).prop("checked",true);
                });
            } else{
                cbs.each(function(){
                    $(this).prop("checked",false);
                });
            };
        };

        var app=angular.module("myapp",[]);
        app.controller("myctrl",function($scope){

            var updateId;
            //小小的回现
            $scope.find=function(sid){
                //把修改页面显示出来
                $scope.isUpdateShow=true;
                //将数局带过去
                for (var i=0;i<$scope.daos.length;i++) {
                    if ($scope.daos[i].id==sid) {
                        //进行赋值
                        updateId=$scope.daos[i];
                        //一个一个赋值
                        $scope.aname=updateId.name;
                        //价格
                        $scope.aprice=updateId.price;
                        //上映时间
                        $scope.aplayTime=updateId.playTime;
                        //时长
                        $scope.atime=updateId.time;
                        //类型
                        $scope.atype=updateId.type;
                        //导演
                        $scope.gautror=updateId.author;
                        //评分
                        $scope.ascore=updateId.score;

                        break;
                    }

                }//for

            }

            //真正的修改
            $scope.update=function(){
                //进行重新赋值
                updateId.name=$scope.aname;
                updateId.price=$scope.aprice;
                updateId.playTime=$scope.aplayTime;
                updateId.time=$scope.atime;
                updateId.type=$scope.atype;
                updateId.author=$scope.gautror;
                updateId.score=$scope.ascore;                  
                //修改完,隐藏修改页面
                $scope.isUpdateShow=false;
            }

            var moreById;
            $scope.findMores=function(sid){
                for (var i=0;i<$scope.daos.length;i++) {
                    if ($scope.daos[i].id==sid) {
                        moreById=$scope.daos[i];
                    }
                }//for

                var arr=prompt("请输入应修改的票价:",moreById.price);
                if (arr!=null) {
                    moreById.price=arr;
                }

            }

            //添加
            $scope.add=function(){
                var newdaos={};
                //进行赋值
                newdaos.name=$scope.aname;
                newdaos.price=$scope.aprice;
                newdaos.playTime=$scope.aplayTime;
                newdaos.time=$scope.atime;
                newdaos.type=$scope.atype;
                newdaos.author=$scope.gautror;
                newdaos.score=$scope.ascore;

                //判断信息是否正确
                if (newdaos.name==null||newdaos.name==undefined||newdaos.name=="") {
                    $("#nameSpan").text("*名称不能为空");
                    return;
                }

                if (newdaos.price==null||newdaos.price==undefined||newdaos.price==""||newdaos.price<=0) {
                    $("#nameSpan").text("*价格必须大于0");
                    return;
                }

                if (newdaos.playTime==null||newdaos.playTime==undefined||newdaos.playTime=="") {
                    $("#nameSpan").text("*发行时间不能为空");
                    return;
                }

                if (newdaos.time==null||newdaos.time==undefined||newdaos.time=="") {
                    $("#nameSpan").text("*时长不能为空或0");
                    return;
                }

                if (newdaos.type==null||newdaos.type==undefined||newdaos.type=="") {
                    $("#nameSpan").text("*类型不能为空");
                    return;
                }

                if (newdaos.score==null||newdaos.score==undefined||newdaos.score==""||newdaos.score<=0) {
                    $("#nameSpan").text("*评分不能为0");
                    return;
                }
                //进行添加
                $scope.daos.push(newdaos);

                $scope.isAddShow=false;

            };

            $scope.delMore=function(){
                var cbs=$("input:checked");

                if (cbs.length==0) {
                    alert("请选择")
                } else{
                    cbs.each(function(){
                        for (var i=0;i<$scope.daos.length;i++) {
                            if ($scope.daos[i].id==$(this).val()) {
                                $scope.daos.splice(i,1);
                                break;
                            }
                        }//for

                    });

                }
            }

            //删除一条数据
            $scope.del=function(sid){
                for (var i=0;i<$scope.daos.length;i++) {
                    if ($scope.daos[i].id==sid) {
                        $scope.daos.splice(i,1);
                        break;
                    }
                }
            }

            $scope.daos=[
                {重点内容
                    price: 35.9,
                    "author":"田羽生",
                    "time":120,
                    "type":["喜剧", "爱情"],
                    "id":1,
                    "name":"前任三",
                    "playTime":1511050949001,
                    "score":9.3
                },                  
                {
                    "price":45.5,
                    "author":"格雷",
                    "time":145,
                    "type":["动作","冒险"],
                    "id":2,
                    "name":"速度与激情8",
                    "playTime":1450000949001,
                    "score":9.5
                },
                {
                    "price":42.5,
                    "author":"宋阳",
                    "time":135,
                    "type":["喜剧", "爱情"],
                    "id":3,
                    "name":"羞羞的铁拳",
                    "playTime":1511000949001,
                    "score":8.6
                },
                {
                    "price":38.9,
                    "author":"弗拉基米尔",
                    "time":108,
                    "type":["冒险", "科幻"],
                    "id":4,
                    "name":"太空救援",
                    "playTime":1516000949001,
                    "score":9.4
                }
            ];

        });重点内容
    </script>

</body>