AngularJs添加删除排序查找最后汇总的代码

最新推荐文章于 2020-09-23 13:46:04 发布

一只向上的小蜗牛

最新推荐文章于 2020-09-23 13:46:04 发布

阅读量231

点赞数

本文链接：https://blog.csdn.net/hongfuqiang/article/details/78406773

版权

我们学习AngularJs主要让我们学会混合开发，这个时候我们就要掌握这些主要的点，增删改查排序这些常用到的方法，它们可以帮助我们在以后的学习更好的了解混合开发

效果

源代码如下

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>

    <title>月考</title>
    <style type="text/css">
        * {
            font-size: 16px;
            margin: 0;
            padding: 0;
        }

        body {
            padding: 20px 32px;
        }

        .list {
            width: 1000px;
            margin: 0 auto;
        }

        .list table tr {
            height: 40px;
        }

        .list thead tr {
            background-color: #007aff;
        }

        .list tbody tr:nth-child(odd) {
            background-color: lime;
        }

        .list tbody tr:nth-child(even) {
            background-color: #fafafa;
        }

        .form{
            padding-left: 520px;
        }

        .age_order{
            width: 200px;
            height: 24px;
        }

        a{
            text-decoration:none;
            color: orange;
        }






    </style>
    <script>
        var data=[
            {name:"张三",age:45,py:"zhangsan",zw:"总经理"},
            {name:"李四",age:43,py:"lisi",zw:"设计师"},
            {name:"王五",age:40,py:"wangwu",zw:"工程师"},
            {name:"赵六",age:33,py:"zhaoliu",zw:"工程师"},
            {name:"周七",age:32,py:"zhouqi",zw:"人事经理"}
        ]

    </script>

    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.controller("ctrl",function($scope){
            $scope.data=data;

            //删除
            $scope.deleteSel=function(name){
                if(confirm("是否删除选中项吗？")){
                    for(i in $scope.data){
                        if($scope.data[i].name==name){
                            $scope.data.splice(i,1);
                        }
                    }
                }
            }
            //查询
            $scope.cx =function(){

                var user=[];

                if($scope.selectname==""||$scope.selectname==undefined){
                    alert("请输入姓名");
                    $scope.data=data;
                    return;
                }

                if($scope.selectname=="老王"){
                    alert("敏感词汇");
                    return;

                }

                for(i in $scope.data){
                    if($scope.data[i].name==$scope.selectname){
                        user.push($scope.data[i]);
                    }
                }

                if(user.length<=0){
                    alert("未找到内容");
                }else{
                    $scope.data=[];
                    $scope.data=user;
                }


            };


            //添加按钮
            $scope.show = function () {
                $scope.adduserngshow=true;
            };

            $scope.add=function () {
                //非空判断
                if($scope.name==""||$scope.name==undefined){
                    alert("姓名不能为空");
                    return;
                }
                if($scope.age==""||$scope.age==undefined){
                    alert("年龄不能为空");
                    return;
                }
                if(isNaN($scope.age)){
                    alert("年龄格式错误");
                    return;
                }
                if($scope.py==""||$scope.py==undefined){
                    alert("拼音不能为空");
                    return;
                }
                if($scope.zw==""||$scope.zw==undefined){
                    alert("职位不能为空");
                    return;
                }
                for(var i in $scope.data){
                    //console.log($scope.data[i].name);
                    if($scope.data[i].name==$scope.name){
                        alert("用户名重复,已经注册过");
                        return;
                    }
                }
                var useraa={
                    name:$scope.name,
                    age:$scope.age,
                    py:$scope.py,
                    zw:$scope.zw
                };

                $scope.data.push(useraa);
                $scope.name="";
                $scope.age="";
                $scope.py="";
                $scope.zw="";
                $scope.adduserngshow=false;
            };



        });




    </script>
</head>
<body ng-controller="ctrl">
<div class="form">
    姓名查询条件 <input type="text" style="width: 240px;margin-right: 220px" ng-model="selectname">

    <select class="age_order" ng-model="age_order_type">

        <option value="age">按年龄正序</option>
        <option value="-age">按年龄倒序</option>
    </select>

</div>

<div class="list">

    用户列表     敏感字 老王
    <table width="1000px" cellspacing="0" rules="cols" border="1px">
        <thead>
        <tr>

            <th width="10%">姓名</th>
            <th width="12%">年龄</th>
            <th width="18%">拼音</th>
            <th width="23%">职位</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr align="center" ng-repeat="order in data | orderBy :age_order_type">
            <td>{{ order.name }}</td>
            <td>{{ order.age}}</td>
            <td>{{ order.py }}</td>
            <td>{{ order.zw }}</td>
            <td><a href="javascript:void(0)" ng-click="deleteSel(order.name)">删除</a></td>

        </tr>
        </tbody>
    </table>
</div>

<button style="background-color: #00ff00 ; width: 100px; height: 40px; border-radius:4px; position: absolute; left: 500px;
    top: 350px" ng-click="cx()">查询</button>

<button style="background-color: #00ff00 ; width: 100px; height: 40px; border-radius:8px; position: absolute; left: 750px;
    top: 349px " ng-click="show()">添加用户</button>

<div ng-show="adduserngshow" style="position: absolute; top: 450px; left: 500px; border: 1px solid blue;padding: 50px">

    添加用户信息
    <table cellspacing="20px">
        <tr>
            <th>姓名:</th>
            <td><input type="text" ng-model="name" ></td>
        </tr>

        <tr>
            <th>年龄:</th>
            <td><input type="text" ng-model="age"></td>
        </tr>

        <tr>
            <th>拼音:</th>
            <td><input type="text" ng-model="py" ></td>
        </tr>

        <tr>
            <th>职位:</th>
            <td><input type="text" ng-model="zw" ></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button ng-click="add()" style="background-color: #fff ; width: 120px; height: 40px; border-radius:8px;">提交</button>
            </td>
        </tr>

    </table>



</div>




</body>
</html>

一只向上的小蜗牛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJs添加删除排序查找最后汇总的代码

我们学习AngularJs主要让我们学会混合开发，这个时候我们就要掌握这些主要的点，增删改查排序这些常用到的方法，它们可以帮助我们在以后的学习更好的了解混合开发效果源代码如下html>html ng-app="myApp">head lang="en"> meta charset="UTF-8"> script type="text/ja
复制链接

扫一扫