已有数据进行增删改查

最新推荐文章于 2023-03-21 16:59:34 发布

l6666_6666

最新推荐文章于 2023-03-21 16:59:34 发布

阅读量187

点赞数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>大工程增删改查</title>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module("anan", []);
            app.controller("enen", function($scope) {
                $scope.user = [{
                    ck:false,
                    id: 1,
                    name: '李1',
                    pwd: 123456,
                    level: 3
                }, {
                    ck:false,
                    id: 2,
                    name: '李2',
                    pwd: 123456,
                    level: 1
                }, {
                    ck:false,
                    id: 3,
                    name: '李3',
                    pwd: 123456,
                    level: 3
                }, {
                    ck:false,
                    id: 4,
                    name: '李4',
                    pwd: 123456,
                    level: 1
                }, {
                    ck:false,
                    id: 5,
                    name: '李5',
                    pwd: 123456,
                    level: 2
               }, {ck:false,

                    id: 6,
                    name: '李6',
                    pwd: 123456,
                    level: 3
                }, {
                    ck:false,
                    id: 7,
                    name: '李7',
                    pwd: 123456,
                    level: 2
                }, {
                    ck:false,
                    id: 8,
                    name: '李8',
                    pwd: 123456,
                    level: 1
                }, {
                    ck:false,
                    id: 9,
                    name: '李9',
                    pwd: 123456,
                    level: 2
                }, {
                    ck:false,
                    id: 10,
                    name: '李10',
                    pwd: 123456,
                    level: 1
                }];

                $scope.ckAll=function(){
                    for(var i=0;i<$scope.user.length;i++){
                        $scope.user[i].ck=$scope.flag;
                    }
                }
                $scope.delso=function(){
                    var shu=0;
                    for(var i=0;i<$scope.user.length;i++){
                        if($scope.user[i].ck){
                            $scope.user.splice(i,1);
                            shu++;
                            i--;
                        }
                    }
                }
                //添加
                $scope.insert=function(m){
                    var good={ck:false,id:$scope.tid,name:$scope.tname,pwd:$scope.tpwd,level:$scope.tlevel};
                    $scope.user.push(good);
                }
            })
        </script>
        <style type="text/css">
            #cll:nth-child(even){
                background-color: lightseagreen;
            }
            #cll:nth-child(odd){
                background-color:#C9C994;
            }
        </style>
    </head>
    <body ng-app="anan" ng-controller="enen">
        <div style="margin: 0 auto; height:800px; width: 1000px; border: 1px solid greenyellow; ">
            <input placeholder="用户名搜索" ng-model="souname"/>
            <select ng-model="jb">
<option value="">选择级别</option >
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
       </select>

         　　　　　　　　　　　排序<select ng-model="px">
<option>排序</option>
<option value="id">id</option>
<option value="level">级别</option>
      </select><br/>
<button style=" background-color: #008000; margin: 6px; color: #FFFFFF;" ng-click="m=true">新增用户</button>
      <button style="color: #FFFFFF; background-color: crimson;margin: 6px;" ng-click="delso()">批量删除</button>

            <div style="width: 1000px;border: 1px solid greenyellow;" ng-show="m">
                　id:<input type="number" ng-model="tid"/>　
                用户名:<input ng-model="tname"/>　
                密码:<input ng-model="tpwd"/>　
                级别:<input type="number" ng-model="tlevel"/>　
                <button ng-click="insert(m=false)">添加</button>
            </div>
            <table style="width: 1000px;" border="1px">
                <tr style="background-color: cadetblue;">
                    <td><input type="checkbox" ng-click="ckAll()" ng-model="flag"/></td>
                    <td>id</td>
                    <td>用户名</td>
                    <td>密码</td>
                    <td>级别</td>
                    <td>操作</td>
                </tr>
                <tr id="cll" ng-repeat="e in user|orderBy:px:false|filter:{name:souname}|filter:{level:jb}">
                    <td><input type="checkbox" ng-model="e.ck"/></td>
                    <td>{{e.id}}</td>
                    <td>{{e.name}}</td>
                    <td><span> {{e.pwd}}</span>
                        <span ng-show="f">
                        <input ng-model="e.pwd" />
                        <button ng-click="f=false">保存</button>
                    </span></td>
                   <td>{{e.level}}</td>
                    <td><button ng-click="f=true">修改密码</button></td>
                </tr>
            </table>
        </div>
    </body>
</html>

l6666_6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
已有数据进行增删改查

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;大工程增删改查&lt;/title&gt; &lt;script src="js/angular.min.js"&amp
复制链接

扫一扫