zoukankan      html  css  js  c++  java
  • angular 增删改查的另一方法

     var myapp = angular.module("myapp",[]);
            myapp.controller("myCtrl",function ($scope) {
                $scope.isShowAddUser = false;
                $scope.changedName = "";
                $scope.changedOldPass = "";
                $scope.changedNewPass = "";
                $scope.changedCheckPass = "";
                $scope.isShowChangePass = false;
                $scope.searchName = "";
                $scope.searchAge = "";
                $scope.searchSex = "";

                $scope.addId = "";
                $scope.addName = "";
                $scope.addPass = "";
                $scope.addAge = "";
                $scope.addSex = "";
                $scope.items = [
                    {
                        id:1,
                        name:"a",
                        pass:111,
                        age:20,
                        sex:"男"
                    },
                    {
                        id:2,
                        name:"b",
                        pass:222,
                        age:21,
                        sex:"女"
                    },
                    {
                        id:3,
                        name:"c",
                        pass:333,
                        age:22,
                        sex:"男"
                    }
                ];
                $scope.showChangePass = function () {
                    $scope.isShowChangePass = true;
                };
                $scope.submitChangePass = function () {
                    var isHave = false;
                    var success = false;
                    for (var i = 0;  i < $scope.items.length; i++){
                        if ($scope.items[i].name == $scope.changedName){
                            isHave = true;
                            if ($scope.items[i].pass == $scope.changedOldPass){
                                if( $scope.changedNewPass == $scope.changedCheckPass ){
                                    $scope.items[i].pass = $scope.changedNewPass;
                                    success = true;
                                    alert("修改成功");
                                }else{
                                    alert("两次密码不一致");
                                }
                            }else{
                                alert("原始密码不正确");
                            }
                        }
                    }
                    if (!isHave){
                        alert("该用户名不存在");
                    }
                    if (success){
                        $scope.isShowChangePass = false;
                    }

                };
                $scope.addUer = function () {
                    $scope.isShowAddUser = true;
                };
                $scope.completeAdd = function () {
                    $scope.items.push({id:$scope.addId,name:$scope.addName,pass:$scope.addPass,age:$scope.addAge,sex:$scope.addSex});
                    $scope.isShowAddUser = false;
                };
                $scope.deleteAll = function () {
                    var b = confirm("确定要全部删除嘛?");
                    if (b){
                        $scope.items = [];
                    }
                }
            });

    <input type="text" placeholder="用户名查询" ng-model="searchName">
    <input type="text" placeholder="年龄范围查询" ng-model="searchAge">
    <select ng-model="searchSex">
        <option></option>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <button ng-click="deleteAll()">全部删除</button>
    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>用户名</th>
            <th>密码</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in items | filter:{'name':searchName} | filter:{age:searchAge} | filter:{sex:searchSex}">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.pass}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td><button ng-click="showChangePass()">修改密码</button></td>
        </tr>
        </tbody>
    </table>
    <button ng-click="addUer()">添加用户</button>
    <div ng-show="isShowChangePass">
        用户名:<input type="text" ng-model="changedName"><br>
        旧密码:<input type="text" ng-model="changedOldPass"><br>
        新密码:<input type="text" ng-model="changedNewPass"><br>
        确认密码:<input type="text" ng-model="changedCheckPass"><br>
        <button ng-click = "submitChangePass()">提交</button>
    </div>
    <div ng-show="isShowAddUser">
        <input type="text" placeholder="id" ng-model="addId">
        <input type="text" placeholder="用户名" ng-model="addName">
        <input type="text" placeholder="密码" ng-model="addPass">
        <input type="text" placeholder="年龄" ng-model="addAge">
        <select ng-model="addSex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <button ng-click="completeAdd()">添加</button>
    </div>

  • 相关阅读:
    matplotlib 去掉坐标轴
    求最大公约数最小公倍数及整除求余数等
    数据分析小题
    map,reduce,filter基础实现
    今日成果:爬取百度贴吧
    Jquery瀑布流布局,jQuery Wookmark Load 示例
    html5 input type="color"边框伪类效果
    Jquery点击除了指定div元素其他地方,隐藏该div
    Jquery判断checkbox是否被选中
    Jquery给网页的title取值和赋值
  • 原文地址:https://www.cnblogs.com/zzwerzi/p/7567008.html
Copyright © 2011-2022 走看看