angularjs 可添加+修改+删除

来源：互联网发布：网络高清光端机是硬盘编辑：程序博客网时间：2024/05/16 16:15
<!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