angularjs 可添加+修改+删除

最新推荐文章于 2021-06-08 13:40:37 发布

置顶赛文

最新推荐文章于 2021-06-08 13:40:37 发布

阅读量581

点赞数

分类专栏： angular js

本文链接：https://blog.csdn.net/qq_39493777/article/details/78058785

版权

angular js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 10px;
            text-align: center;
        }
        tr,td{
            border: 1px solid #000;
            border-collapse: collapse;
            padding: 10px;
        }
    </style>
    <script src="../../script/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myctrl",function ($scope) {
            var items=[
                {"id":124,"name":"zhang","pass":456,"age":13,"sex":"女"},
                {"id":144,"name":"zhangfei","pass":956,"age":23,"sex":"男"},
                {"id":134,"name":"zhangcvs","pass":476,"age":33,"sex":"男"},
                {"id":224,"name":"zhangsdf","pass":466,"age":18,"sex":"女"}
            ];
            $scope.items=items;
            $scope.show=false;
            $scope.unshow=false;
            $scope.add=function () {
                $scope.show=true;
                $scope.unshow=false;

            };

            $scope.action=function () {

                items.push({
                    "id": $scope.myid,
                    "name": $scope.myname,
                    "pass": $scope.mypass,
                    "age": $scope.myage,
                    "sex": $scope.mysex
                });

            };
            $scope.allcheck=function () {
                var arr=[];
                var is=confirm("确定全部删除?");
                if(is==true) {
                    for (var i = 0; i < items.length; i++) {
                        items[i] = "";
                    }
                }
            }
            $scope.update=function (item) {
                console.log(item);
                $scope.unshow=true;
                $scope.show=false;

                $scope.but=function () {
                    for(var i=0;i<items.length;i++){
                        if(items[i].id==item.id&&$scope.newpass==$scope.surepass&&$scope.oldpass==items[i].pass){

                            items[i].pass=$scope.newpass;
                            break;
                        }else {
                            confirm("密码错误,请核对信息");
                            break;
                        }
                    }
                }
            }

        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
    <input type="text" ng-model="na"/><input type="text" ng-model="ag"/>
    性别:<select ng-model="se">
        <option>女</option>
        <option>男</option>
    </select>
    <button ng-click="allcheck()">全部删除</button>
<table>
    <tr>
        <td>id</td>
        <td>用户名</td>
        <td>密码</td>
        <td>年龄</td>
        <td>性别</td>
        <td>操作</td>
    </tr>
    <tr ng-repeat="item in items | filter:{'name':na} | filter:{'age':ag} | filter:{'sex':se}">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.pass}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td><button ng-click="update(item)">修改密码</button></td>
    </tr>
</table>
<button ng-click="add()">添加用户</button>
    <div ng-show="show">
            id:<input type="text" ng-model="myid"/><br>
         用户名:<input type="text" ng-model="myname"/><br>
            密码:<input type="text" ng-model="mypass"/><br>
            年龄:<input type="text" ng-model="myage"/><br>
            性别:<input type="text" ng-model="mysex"/><br>
             <button ng-click="action()">提交</button>
    </div>
    <div ng-show="unshow">
        旧密码:<input type="text" ng-model="oldpass"/><br>
        新密码:<input type="text" ng-model="newpass"/><br>
        确认密码:<input type="text" ng-model="surepass"/><br>
        <button ng-click="but()">提交</button>
    </div>
</body>
</html>

赛文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs 可添加+修改+删除

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> table{ border: 1px solid #000; border-collapse: collapse; margin: 10p
复制链接

扫一扫